Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
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-autocompleteHow 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!