pagesource / atomic-react-components

A react pattern library with collocation for generic react components equipped with recommended development ecosystem.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add Typeahead / Autosuggest Molecule

manishekhawat opened this issue · comments

Issue Statement

Create a typeahead / autosuggest component

Summary

Create an independent react component with following requirement considerations:

  1. Use react-autosuggest to create a wrapper and expose all the functionalities as an API.
  2. Use the children pattern to have the flexibility to consume any element as the toast body.
  3. Use the existing input component.
  4. Create a wrapper named FieldTypeahead with label and export it as part of the form.
  5. Don't use spread operator to consume props. Define all the supported props in the component declaration for ease of consumption
  6. Keep a parameter to trigger the request function after "x" characters.
  7. Option to debounce the fetch request with a prop controlling the duration. Default duration: 500ms

Sample Screenshot

image

Reference

https://www.npmjs.com/package/react-autosuggest