https://github.com/lowewenzel/use-autocomplete

React use-autocomplete hook for autocomplete components
https://github.com/lowewenzel/use-autocomplete

autocompletion hook react

Last synced: about 1 month ago
JSON representation

React use-autocomplete hook for autocomplete components

• Host: GitHub
• URL: https://github.com/lowewenzel/use-autocomplete
• Owner: lowewenzel
• License: mit
• Created: 2020-05-05T18:34:29.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T19:58:29.000Z (almost 2 years ago)
• Last Synced: 2024-04-24T17:40:38.129Z (8 months ago)
• Topics: autocompletion, hook, react
• Language: TypeScript
• Homepage: https://autocomplete.wnzl.dev/
• Size: 7.51 MB
• Stars: 7
• Watchers: 2
• Forks: 0
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md

Awesome Lists containing this project

• fucking-awesome-react-hooks - `use-autocomplete`
• awesome-react-hooks-cn - `use-autocomplete`
• awesome-react-hooks - `use-autocomplete`
• awesome-react-hooks - `use-autocomplete`

README

        


## React use-autocomplete

[![npm version](https://badge.fury.io/js/use-autocomplete.svg)](https://badge.fury.io/js/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](./examples) for more.

## How to install

Run the following to install the hook

```bash

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

```js

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 (

    


       setTextState(e.target.value)}

      />

      


        {completions.map((val, index) => (

          
{val}

        ))}

      

    

  );

};

```


#### Data conversion

```js

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 (

    


       setTextState(e.target.value)}

      />

      


        {completions.map((val, index) => (

          
{val}

        ))}

      

    

  );

};

```




## Contributing

Pull requests welcome!