This repo has an autocomplete component with the following features.
- Debounce: Configurable debounce method to avoid requests when fast typing.
- Highlight: It highlights your search inside the result
- Plug & play: Easy to use with any API
- No third party dependencies
- debounceTime (optional) - number - Indicates how much time should pass between requests (in ms). Default 300ms.
- placeholder (optional) - string - Indicates the placeholder of the search input.
- limit (optional) - number - Indicates max amount of results that are shown. Default 5.
- icon (optional) - string - Indicates if it should render an icon inside the search box. Default: false
- apiUrl (optional) - string - Indicates the URL from where data will be fetched. Dynamic data should be at the end of the string.
- data (optional) - array - Array of local data to show in the autocomplete.
- keysToSearch (optional) - array - Array of keys that the autocomplete will use for filtering. Required if using
data
. - keysToShow (requred) - array - Array of keys that the autocomplete will show in the results.
- main -> React with classes, using create-react-app
- functional -> React with functional components, using create-react-app
- webpack-babel -> React with classes. No kickoff dependencies.
https://deel-frontend-test.vercel.app/
- Clone the repo
- Run
npm install
oryarn install
- Development mode: Run
npm start
oryarn start
- Production build: Run
npm run build