Top Related Projects
🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.
WAI-ARIA compliant React autosuggest component
The Select Component for React.js
React typeahead with Bootstrap styling
Quick Overview
React-Autocomplete is a lightweight, customizable autocomplete component for React applications. It provides a flexible and accessible way to implement autocomplete functionality, allowing users to search and select items from a list of suggestions as they type.
Pros
- Easy to integrate with existing React projects
- Highly customizable, allowing for custom styling and behavior
- Supports keyboard navigation for improved accessibility
- Lightweight with minimal dependencies
Cons
- Limited built-in features compared to some more comprehensive autocomplete libraries
- Documentation could be more extensive and up-to-date
- Not actively maintained, with the last update being several years ago
- May require additional work to implement more complex autocomplete scenarios
Code Examples
- Basic usage:
import Autocomplete from 'react-autocomplete'
const MyComponent = () => {
const [value, setValue] = useState('')
return (
<Autocomplete
items={['apple', 'banana', 'cherry']}
value={value}
onChange={(e) => setValue(e.target.value)}
onSelect={(val) => setValue(val)}
/>
)
}
- Custom rendering of menu items:
<Autocomplete
items={[
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Cherry' }
]}
renderItem={(item, isHighlighted) => (
<div style={{ background: isHighlighted ? 'lightgray' : 'white' }}>
{item.name}
</div>
)}
getItemValue={(item) => item.name}
/>
- Custom filtering:
<Autocomplete
items={['apple', 'banana', 'cherry']}
shouldItemRender={(item, value) => item.toLowerCase().indexOf(value.toLowerCase()) > -1}
/>
Getting Started
To use React-Autocomplete in your project, first install it via npm:
npm install --save react-autocomplete
Then, import and use it in your React component:
import React, { useState } from 'react'
import Autocomplete from 'react-autocomplete'
const MyComponent = () => {
const [value, setValue] = useState('')
return (
<Autocomplete
items={['apple', 'banana', 'cherry']}
value={value}
onChange={(e) => setValue(e.target.value)}
onSelect={(val) => setValue(val)}
/>
)
}
export default MyComponent
This basic example creates an autocomplete input field with a list of fruit suggestions. You can customize the component further by adding props for styling, item rendering, and filtering behavior.
Competitor Comparisons
🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.
Pros of downshift
- More flexible and customizable, allowing for greater control over UI and behavior
- Provides hooks for easier integration with modern React applications
- Offers better accessibility features out of the box
Cons of downshift
- Steeper learning curve due to its flexibility and more complex API
- Requires more setup and configuration for basic use cases
- May be overkill for simple autocomplete implementations
Code Comparison
react-autocomplete:
<Autocomplete
items={['apple', 'banana', 'cherry']}
shouldItemRender={(item, value) => item.toLowerCase().indexOf(value.toLowerCase()) > -1}
getItemValue={item => item}
renderItem={(item, highlighted) =>
<div key={item} style={{ backgroundColor: highlighted ? '#eee' : 'transparent'}}>
{item}
</div>
}
value={this.state.value}
onChange={e => this.setState({ value: e.target.value })}
onSelect={value => this.setState({ value })}
/>
downshift:
<Downshift
onChange={selection => console.log(selection)}
itemToString={item => (item ? item.value : '')}
>
{({
getInputProps,
getItemProps,
getMenuProps,
isOpen,
inputValue,
highlightedIndex,
selectedItem,
}) => (
<div>
<input {...getInputProps()} />
<ul {...getMenuProps()}>
{isOpen &&
items
.filter(item => !inputValue || item.value.includes(inputValue))
.map((item, index) => (
<li
{...getItemProps({
key: item.value,
index,
item,
style: {
backgroundColor: highlightedIndex === index ? 'lightgray' : 'white',
fontWeight: selectedItem === item ? 'bold' : 'normal',
},
})}
>
{item.value}
</li>
))}
</ul>
</div>
)}
</Downshift>
WAI-ARIA compliant React autosuggest component
Pros of react-autosuggest
- More customizable and flexible, allowing for complex use cases
- Better accessibility support out of the box
- More active development and community support
Cons of react-autosuggest
- Steeper learning curve due to increased complexity
- Requires more setup and configuration for basic use cases
Code Comparison
react-autocomplete:
<Autocomplete
getItemValue={(item) => item.label}
items={[
{ label: 'apple' },
{ label: 'banana' },
{ label: 'pear' }
]}
renderItem={(item, isHighlighted) =>
<div style={{ background: isHighlighted ? 'lightgray' : 'white' }}>
{item.label}
</div>
}
value={value}
onChange={(e) => setValue(e.target.value)}
onSelect={(val) => setValue(val)}
/>
react-autosuggest:
<Autosuggest
suggestions={suggestions}
onSuggestionsFetchRequested={({ value }) => {
setSuggestions(getSuggestions(value));
}}
onSuggestionsClearRequested={() => setSuggestions([])}
getSuggestionValue={(suggestion) => suggestion.name}
renderSuggestion={(suggestion) => <div>{suggestion.name}</div>}
inputProps={{
placeholder: 'Type a programming language',
value,
onChange: (_, { newValue }) => setValue(newValue)
}}
/>
Both libraries provide autocomplete functionality for React applications, but react-autosuggest offers more advanced features and customization options at the cost of increased complexity. react-autocomplete is simpler to set up and use for basic scenarios but may lack some advanced features and accessibility support.
The Select Component for React.js
Pros of react-select
- More feature-rich with advanced capabilities like multi-select, async loading, and custom styling
- Actively maintained with frequent updates and a large community
- Extensive documentation and examples
Cons of react-select
- Larger bundle size due to more features
- Steeper learning curve for complex use cases
- May be overkill for simple autocomplete needs
Code Comparison
react-autocomplete:
<Autocomplete
getItemValue={(item) => item.label}
items={[
{ label: 'apple' },
{ label: 'banana' },
{ label: 'pear' }
]}
renderItem={(item, isHighlighted) =>
<div style={{ background: isHighlighted ? 'lightgray' : 'white' }}>
{item.label}
</div>
}
value={value}
onChange={(e) => setValue(e.target.value)}
onSelect={(val) => setValue(val)}
/>
react-select:
<Select
options={[
{ value: 'apple', label: 'Apple' },
{ value: 'banana', label: 'Banana' },
{ value: 'pear', label: 'Pear' }
]}
value={selectedOption}
onChange={setSelectedOption}
/>
Summary
react-select offers more features and flexibility, making it suitable for complex use cases. However, it comes with a larger bundle size and steeper learning curve. react-autocomplete is simpler and lighter, ideal for basic autocomplete functionality. The choice between the two depends on the specific requirements of your project and the level of customization needed.
React typeahead with Bootstrap styling
Pros of React Bootstrap Typeahead
- Integrates seamlessly with Bootstrap, providing a consistent look and feel
- Offers more advanced features like multi-select, pagination, and custom rendering
- Actively maintained with regular updates and bug fixes
Cons of React Bootstrap Typeahead
- Larger bundle size due to additional features and Bootstrap dependency
- Steeper learning curve for developers unfamiliar with Bootstrap
- May require additional configuration for non-Bootstrap projects
Code Comparison
React Autocomplete:
<Autocomplete
getItemValue={(item) => item.label}
items={[
{ label: 'apple' },
{ label: 'banana' },
{ label: 'pear' }
]}
renderItem={(item, isHighlighted) =>
<div style={{ background: isHighlighted ? 'lightgray' : 'white' }}>
{item.label}
</div>
}
value={value}
onChange={(e) => setValue(e.target.value)}
onSelect={(val) => setValue(val)}
/>
React Bootstrap Typeahead:
<Typeahead
id="basic-example"
onChange={(selected) => {
// Handle selections...
}}
options={['apple', 'banana', 'pear']}
/>
The React Bootstrap Typeahead example demonstrates a more concise implementation, while React Autocomplete offers more granular control over rendering and item handling.
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
React Autocomplete 
Accessible, extensible, Autocomplete for React.js.
<Autocomplete
getItemValue={(item) => item.label}
items={[
{ label: 'apple' },
{ label: 'banana' },
{ label: 'pear' }
]}
renderItem={(item, isHighlighted) =>
<div style={{ background: isHighlighted ? 'lightgray' : 'white' }}>
{item.label}
</div>
}
value={value}
onChange={(e) => value = e.target.value}
onSelect={(val) => value = val}
/>
Check out more examples and get stuck right in with the online editor.
Install
npm
npm install --save react-autocomplete
yarn
yarn add react-autocomplete
AMD/UMD
- Development: https://unpkg.com/react-autocomplete@1.8.1/dist/react-autocomplete.js
- Production: https://unpkg.com/react-autocomplete@1.8.1/dist/react-autocomplete.min.js
API
Props
getItemValue: Function
Arguments: item: Any
Used to read the display value from each entry in items.
items: Array
The items to display in the dropdown menu
renderItem: Function
Arguments: item: Any, isHighlighted: Boolean, styles: Object
Invoked for each entry in items that also passes shouldItemRender to
generate the render tree for each item in the dropdown menu. styles is
an optional set of styles that can be applied to improve the look/feel
of the items in the dropdown menu.
autoHighlight: Boolean (optional)
Default value: true
Whether or not to automatically highlight the top match in the dropdown menu.
inputProps: Object (optional)
Default value: {}
Props passed to props.renderInput. By default these props will be
applied to the <input /> element rendered by Autocomplete, unless you
have specified a custom value for props.renderInput. Any properties
supported by HTMLInputElement can be specified, apart from the
following which are set by Autocomplete: value, autoComplete, role,
aria-autocomplete. inputProps is commonly used for (but not limited to)
placeholder, event handlers (onFocus, onBlur, etc.), autoFocus, etc..
isItemSelectable: Function (optional)
Default value: function() { return true }
Arguments: item: Any
Invoked when attempting to select an item. The return value is used to determine whether the item should be selectable or not. By default all items are selectable.
menuStyle: Object (optional)
Default value:
{
borderRadius: '3px',
boxShadow: '0 2px 12px rgba(0, 0, 0, 0.1)',
background: 'rgba(255, 255, 255, 0.9)',
padding: '2px 0',
fontSize: '90%',
position: 'fixed',
overflow: 'auto',
maxHeight: '50%', // TODO: don't cheat, let it flow to the bottom
}
Styles that are applied to the dropdown menu in the default renderMenu
implementation. If you override renderMenu and you want to use
menuStyle you must manually apply them (this.props.menuStyle).
onChange: Function (optional)
Default value: function() {}
Arguments: event: Event, value: String
Invoked every time the user changes the input's value.
onMenuVisibilityChange: Function (optional)
Default value: function() {}
Arguments: isOpen: Boolean
Invoked every time the dropdown menu's visibility changes (i.e. every time it is displayed/hidden).
onSelect: Function (optional)
Default value: function() {}
Arguments: value: String, item: Any
Invoked when the user selects an item from the dropdown menu.
open: Boolean (optional)
Used to override the internal logic which displays/hides the dropdown
menu. This is useful if you want to force a certain state based on your
UX/business logic. Use it together with onMenuVisibilityChange for
fine-grained control over the dropdown menu dynamics.
renderInput: Function (optional)
Default value:
function(props) {
return <input {...props} />
}
Arguments: props: Object
Invoked to generate the input element. The props argument is the result
of merging props.inputProps with a selection of props that are required
both for functionality and accessibility. At the very least you need to
apply props.ref and all props.on<event> event handlers. Failing to do
this will cause Autocomplete to behave unexpectedly.
renderMenu: Function (optional)
Default value:
function(items, value, style) {
return <div style={{ ...style, ...this.menuStyle }} children={items}/>
}
Arguments: items: Array<Any>, value: String, styles: Object
Invoked to generate the render tree for the dropdown menu. Ensure the
returned tree includes every entry in items or else the highlight order
and keyboard navigation logic will break. styles will contain
{ top, left, minWidth } which are the coordinates of the top-left corner
and the width of the dropdown menu.
selectOnBlur: Boolean (optional)
Default value: false
Whether or not to automatically select the highlighted item when the
<input> loses focus.
shouldItemRender: Function (optional)
Arguments: item: Any, value: String
Invoked for each entry in items and its return value is used to
determine whether or not it should be displayed in the dropdown menu.
By default all items are always rendered.
sortItems: Function (optional)
Arguments: itemA: Any, itemB: Any, value: String
The function which is used to sort items before display.
value: Any (optional)
Default value: ''
The value to display in the input field
wrapperProps: Object (optional)
Default value: {}
Props that are applied to the element which wraps the <input /> and
dropdown menu elements rendered by Autocomplete.
wrapperStyle: Object (optional)
Default value:
{
display: 'inline-block'
}
This is a shorthand for wrapperProps={{ style: <your styles> }}.
Note that wrapperStyle is applied before wrapperProps, so the latter
will win if it contains a style entry.
Imperative API
In addition to the props there is an API available on the mounted element which is similar to that of HTMLInputElement. In other words: you can access most of the common <input> methods directly on an Autocomplete instance. An example:
class MyComponent extends Component {
componentDidMount() {
// Focus the input and select "world"
this.input.focus()
this.input.setSelectionRange(6, 11)
}
render() {
return (
<Autocomplete
ref={el => this.input = el}
value="hello world"
...
/>
)
}
}
Development
You can start a local development environment with npm start. This command starts a static file server on localhost:8080 which serves the examples in examples/. Hot-reload mechanisms are in place which means you don't have to refresh the page or restart the build for changes to take effect.
Tests!
Run them:
npm test
Write them:
lib/__tests__/Autocomplete-test.js
Check your work:
npm run coverage
Scripts
Run with npm run <script>.
gh-pages
Builds the examples and assembles a commit which is pushed to origin/gh-pages, then cleans up your working directory. Note: This script will git checkout master before building.
release
Takes the same argument as npm publish, i.e. [major|minor|patch|x.x.x], then tags a new version, publishes, and pushes the version commit and tag to origin/master. Usage: npm run release -- [major|minor|patch|x.x.x]. Remember to update the CHANGELOG before releasing!
build
Runs the build scripts detailed below.
build:component
Transpiles the source in lib/ and outputs it to build/, as well as creating a UMD bundle in dist/.
build:examples
Creates bundles for each of the examples, which is used for pushing to origin/gh-pages.
test
Runs the test scripts detailed below.
test:lint
Runs eslint on the source.
test:jest
Runs the unit tests with jest.
coverage
Runs the unit tests and creates a code coverage report.
start
Builds all the examples and starts a static file server on localhost:8080. Any changes made to lib/Autocomplete.js and the examples are automatically compiled and transmitted to the browser, i.e. there's no need to refresh the page or restart the build during development. This script is the perfect companion when making changes to this repo, since you can use the examples as a test-bed for development.
Top Related Projects
🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.
WAI-ARIA compliant React autosuggest component
The Select Component for React.js
React typeahead with Bootstrap styling
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot