Autocomplete
This package implements a Autocomplete
component. This component only deals with rendering the list, not the actual input element.
Example
Key points
- Uses Downshift for autocomplete
- Uses react-tiny-virtual-list for performant list rendering
- Uses fuzzaldrin-plus for fuzzy filtering
- Uses
evergreen-popover
for the popover
Usage
<Autocomplete = => key getInputProps getRef <TextInput = = /> </Autocomplete>
Prop types and default props
static propTypes = items: PropTypesarrayisRequired selectedItem: PropTypesany defaultSelectedItem: PropTypesany children: PropTypesfuncisRequired itemSize: PropTypesnumber renderItem: PropTypesfunc itemsFilter: PropTypesfunc isFilterDisabled: PropTypesbool popoverMinWidth: PropTypesnumber popoverMaxHeight: PropTypesnumber useSmartPositioning: PropTypesbool ...DownshiftpropTypes static defaultProps = i == null ? '' : Stringi itemSize: 32 itemsFilter: fuzzyFilter isFilterDisabled: false popoverMinWidth: 200 popoverMaxHeight: 240 useSmartPositioning: false renderItem: autocompleteItemRenderer
Complete Story
import storiesOf from '@storybook/react'import React from 'react'import Box from 'ui-box'import starWarsNames from 'starwars-names'import TextInput from 'evergreen-text-input'import Autocomplete from '../src/' // Generate a big list of itemsconst items = ...starWarsNamesall ...starWarsNamesall ...starWarsNamesall const handleChange = { console}