autocomplete

A simple react autocomplete input built with Chakra UI

Sep 27, 2021
A simple react autocomplete input built with Chakra UI

Chakra UI Simple Autocomplete

A simple autocomplete input built with Chakra UI.

676966

View Demo View Github

Install

npm install chakra-ui-simple-autocomplete

Usage

  • Usage Example with TSX/Typescript
import { Autocomplete, Option } from 'chakra-ui-simple-autocomplete'; const options = [ { value: 'javascript', label: 'Javascript' }, { value: 'chakra', label: 'Chakra' }, { value: 'react', label: 'React' }, { value: 'css', label: 'CSS' }, ]; const AutocompleteWrapper = () => { const [result, setResult] = React.useState<Option[]>([]); return ( <Box maxW="md"> <Autocomplete options={options} result={result} setResult={(options: Option[]) => setResult(options)} placeholder="Autocomplete" /> </Box> ); };
  • Usage Example with TSX and Formik + Yup
import { Autocomplete, Option } from 'chakra-ui-simple-autocomplete'; import { Badge, Box } from '@chakra-ui/react'; const options = [ { value: 'javascript', label: 'Javascript' }, { value: 'chakra', label: 'Chakra' }, { value: 'react', label: 'React' }, { value: 'css', label: 'CSS' }, ]; const autocompleteSchema = Yup.object().shape({ tags: Yup.array() .of( Yup.object().shape({ value: Yup.string(), label: Yup.string(), }), ) .min(1), }); const AutocompleteWrapper = () => { const [result, setResult] = React.useState<Option[]>([]); return ( <Formik validationSchema={autocompleteSchema} initialValues={{ tags: [] }} onSubmit={(values) => { console.log(values) }}> {(props) => ( <Box maxW="md"> <Field name="tags"> {({ field, form }: FieldProps) => ( <Autocomplete options={options} result={result} setResult={(options: Option[]) => { form.setFieldValue('tags', options); setResult(options); }} placeholder="Autocomplete" /> )} </Field> </Box> )} </Formik> ); };

Props

PropertyTypeRequiredDescription
optionsOption[]YesAn array of Option to render on the autocomplete
resultOption[]YesState where the selected options are going to be stored
setResult(options: Option[]) => voidYesCallback to be triggered everytime the we add/remove an option from the result
renderBadge(option: Option) => React.ReactNodeNoRenders each selected option
renderCheckIcon(option: Option) => React.ReactNodeNoCustom check icon
renderCreateIcon() => React.ReactNodeNoCustom create icon
placeholderStringNoPlaceholder for the input
colorSchemeStringNoColor scheme to be applied on the input
bgHoverColorStringNoBackground color when hovering the options
allowCreationBooleanNoShow the create new tag option. Default true
notFoundTextStringNo"Not found" text to be displayed if allowCreation is false.

Contributing

Please contribute using Github Flow. Create a branch, add commits, and open a pull request.

License

License: MIT

Related React stuff

Recommended