pcln-autocomplete

Composable React autocomplete component built with [Downshift][]

``sh
npm i pcln-autocomplete
`

`jsx
import React from 'react'
import { Autocomplete } from 'pcln-autocomplete'
import { Icon, Text } from 'pcln-design-system'

export default props =>
match={(item, value) => item.includes(value)}
onChange={item => {
props.onChange(item)
}}>

Location



{props.locations.map(location => (
key={location.name}
item={location}>
name='pin'
mr={2}
color='blue'
/>

{location.name}


))


`

_Note: relies on values from theme, so it must be a descendent of in order to work properly. Otherwise, you might experience errors like this:_

`
Uncaught TypeError: Cannot read property '3' of undefined
`

Components

All components can be imported by name and subcomponents are provided as static properties on the Autocomplete component.

$3

Wrapper for Downshift component with additional match prop.

| Prop | Type | Description |
| -------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| match | function | Filters direct children of the Menu component |
| itemToString | function | Used to determine the string value for the selected item (shown in the input value) |
| onChange | function | Called when the user selects an item and the selected item has changed. Called with the item that was selected and the new state of downshift |

For additional props, see the [Downshift documentation][downshift].

$3

Design system Label component with additional default props provided by Downshift for accessibility.

$3

Design system Input component with additional default props provided by Downshift for accessibility.

$3

Design system Card component with styles and default props to work with Downshift.

$3

Design system Flex component with styles and default props to work with Downshift.

Roadmap

- [ ] Make autocomplete elements compatible with design system FormField`

[downshift]: https://github.com/paypal/downshift