fedeorlandau/chakra-ui-simple-autocomplete

A simple autocomplete for Chakra UI

Chakra UI Simple Autocomplete

A simple autocomplete input built with Chakra UI

Demo

Storybook

Typescript CodeSandbox

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

Property	Type	Required	Description
options	Option[]	Yes	An array of Option to render on the autocomplete
result	Option[]	Yes	State where the selected options are going to be stored
setResult	(options: Option[]) => void	Yes	Callback to be triggered everytime the we add/remove an option from the result
renderBadge	(option: Option) => React.ReactNode	No	Renders each selected option
renderCheckIcon	(option: Option) => React.ReactNode	No	Custom check icon
renderCreateIcon	() => React.ReactNode	No	Custom create icon
placeholder	String	No	Placeholder for the input
colorScheme	String	No	Color scheme to be applied on the input
bgHoverColor	String	No	Background color when hovering the options
allowCreation	Boolean	No	Show the create new tag option. Default true
notFoundText	String	No	"Not found" text to be displayed if allowCreation is false.
disableRenderBadge	Boolean	No	Optional prop for turning off the renderBadge function.

🛠️ Support

Please open an issue for support.

📝 Contributing

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

📜 License

chakra-ui-simple-autocomplete's Issues

Make `Option` generic

We should allow Option to be generic. Cheers,

Navigate with the keyboard

I'd love to make this component more accesible. For this reason, we need to provide keyboard navigation on the option list.

Add github actions for running tests

It should run pnpm test on every PR

SyntaxError: Named export 'chakra' not found.

Hey there, I'm running into the following error:

SyntaxError: Named export 'chakra' not found. The requested module '@chakra-ui/system' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@chakra-ui/system';

It looks to be the same thing as chakra-ui/chakra-ui#7170. It looks like updating @chakra-ui/react and @chakra-ui/icons should fix it.

styles not being applied

I installed the latest package via npm install and been using it within component
instead of seeing chakra ui styled input, I am seeing vanilla (no style) component

import { Autocomplete, Option } from 'chakra-ui-simple-autocomplete';
....
            <FormControl>
              <FormLabel>Team 1</FormLabel>
              <Autocomplete
                options={availablePlayers}
                result={team1Options}
                setResult={(availablePlayers: Option[]) => setTeam1Options(availablePlayers)}
                placeholder={'Team 1'}
              />
            </FormControl>

Add github action to run build on every PR

Please remove the Travis ci references from the readme file :)

React peerDependency should be >= v18

There is a small bug on the package.json where the peerDependency is react v17 when it should be v18

Add configuration for storybook

It would be nice if we can put some controls on storybook to show different autocomplete configurations (like a placeholder for instance)

Add invalid state

Simply add a new property isInvalid to be passed to the Chakra Input component.

Enhancement Request: Prop to Prevent Rendering of Badges

Love the component but for our use case we don't want to render badges as we are only allowing a select limit of 1. The rederBadge function could return null but the with the margin would still render. I think a simple prop to turn off badge rendering would be a great addition. I can open a PR if you are open to allowing this.

Cheers