react-autocomplete-option v1.0.1
AutocompleteOption
React- Auto complete option is a react component library for building better search components
Usage
import React { useState } from 'react';
import Select from 'react-autocomplete-options';
function Selector() {
const [inputValue, setInputValue] = useState('');
const handleInput = (input) =>{
setInputValue(input)
}
return (
<>
<h1>Search options</h1>
<Select handleInput = {handleInput}
<option>United States</option>
<option>United Kingdom</ option>
<option>Canada</option>
<option>France</option>
</Select>
</>
);
}
ReactDOM.render(<Selector />, document.getElementById('root'))
Interface
The react autocomplete option returns a component similar to the HTML select tag but with superpowers. Similar to the datalist tag. It has an input for searching the options. The options update whenever there is a change in input value rendering only the options that match the input value.
You can get the input value a user selects by passing a handleInput
function as a prop to the component. And in this function you decide what to do with your input value.
Note: It must be a handleInput
function.
Styling
Adding customized styles is easy. There are three components of the selector:
- input box
- options container or list
- options
Style each individually by passing classnames as props to the Select component.
<Select
handleInput = {handleInput}
placeholder: 'please search options',
inputClassName: 'input',
listClassName: 'list',
optionsClassName: 'option',
>
<option>United States</option>
<option>United Kingdom</ option>
<option>Canada</option>
<option>France</option>
</Select>
You can also pass placeholder for the input box as props to your component