1.1.1 • Published 4 years ago
use-autocomplete v1.1.1
React use-autocomplete
About
This is a hook, useAutocomplete
, that returns autocomplete values using a prefix tree. This is for front-end autocompletion rather than remote autocompletion, which is more commonly used.
Use it in any input component, see examples for more.
How to install
Run the following to install the hook
yarn install react-autocomplete
How to use
Import from use-autocomplete
and pass in the search term and list of values. Small example:
With fake data
import React, { useState } from 'react';
import useAutocomplete from 'use-autocomplete';
import testWords from './data/testWords.json';
const Example = () => {
const [textState, setTextState] = useState('');
const [completions] = useAutocomplete(textState, testWords);
return (
<div>
<input
type='text'
value={textState}
onChange={(e) => setTextState(e.target.value)}
/>
<div>
{completions.map((val, index) => (
<p key={index}>{val}</p>
))}
</div>
</div>
);
};
Data conversion
import React, { useState } from 'react';
import useAutocomplete from 'use-autocomplete';
const Example = ({ someSampleObject }) => {
const [textState, setTextState] = useState('');
const [completions] = useAutocomplete(
textState,
Object.keys(someSampleObject)
);
return (
<div>
<input
type='text'
value={textState}
onChange={(e) => setTextState(e.target.value)}
/>
<div>
{completions.map((val, index) => (
<p key={index}>{val}</p>
))}
</div>
</div>
);
};
Contributing
Pull requests welcome!