chakra-react-select is a package that integrates the popular react-select library with Chakra UI, providing a set of customizable and accessible select components that are styled using Chakra UI's design system.

What are chakra-react-select's main functionalities?

Basic Select

This code demonstrates a basic select component using chakra-react-select. It provides a dropdown with options for Chocolate, Strawberry, and Vanilla.

import React from 'react';
import { ChakraProvider } from '@chakra-ui/react';
import { Select } from 'chakra-react-select';

const App = () => (
  <ChakraProvider>
    <Select
      options={[
        { value: 'chocolate', label: 'Chocolate' },
        { value: 'strawberry', label: 'Strawberry' },
        { value: 'vanilla', label: 'Vanilla' }
      ]}
    />
  </ChakraProvider>
);

export default App;

Multi-Select

This code demonstrates a multi-select component using chakra-react-select. It allows users to select multiple options from the dropdown.

import React from 'react';
import { ChakraProvider } from '@chakra-ui/react';
import { Select } from 'chakra-react-select';

const App = () => (
  <ChakraProvider>
    <Select
      isMulti
      options={[
        { value: 'chocolate', label: 'Chocolate' },
        { value: 'strawberry', label: 'Strawberry' },
        { value: 'vanilla', label: 'Vanilla' }
      ]}
    />
  </ChakraProvider>
);

export default App;

Custom Styles

This code demonstrates how to apply custom styles to the select component using chakra-react-select. The control and options are styled with custom colors.

import React from 'react';
import { ChakraProvider } from '@chakra-ui/react';
import { Select } from 'chakra-react-select';

const customStyles = {
  control: (provided) => ({
    ...provided,
    backgroundColor: 'lightblue'
  }),
  option: (provided, state) => ({
    ...provided,
    color: state.isSelected ? 'white' : 'black',
    backgroundColor: state.isSelected ? 'blue' : 'white'
  })
};

const App = () => (
  <ChakraProvider>
    <Select
      styles={customStyles}
      options={[
        { value: 'chocolate', label: 'Chocolate' },
        { value: 'strawberry', label: 'Strawberry' },
        { value: 'vanilla', label: 'Vanilla' }
      ]}
    />
  </ChakraProvider>
);

export default App;

Other packages similar to chakra-react-select

Readme

Source

chakra-react-select

This component is a wrapper for the popular react component react-select made using the UI library Chakra UI.

Usage

In order to use this package, you'll need to have @chakra-ui/react set up like in the guide in their docs. Then install this package:

npm i chakra-react-select

Then you can import the base select package, the async select, or the creatable select:

import Select, { AsyncSelect, CreatableSelect } from "chakra-react-select";

In order to use this component, you can implement it and use it like you would normally use react-select. It should accept all of the props that the original takes, however customizing the theme or the components could break this implementation so change them at your own risk. There are also a few extra things you can do with this wrapper that pull from the chakra library.

You can pass the size prop with either sm, md, or lg. These will reflect the sizes available on the Chakra <Input /> component (with the exception of xs because it's too small to work).
In your options objects, you can add the key isFixed to emulate the example in the react-select docs.
You can pass the colorScheme prop to the select component to change all of the selected options tags' colors. You can view the whole list of available color schemes in the Chakra docs, or if you have a custom color palette, any of the custom color names in that will be available instead.
- Alternatively you can add the colorScheme value to any of your options objects and it will only style that option when selected.
You can pass isInvalid to the select component to style it like the Chakra <Input /> is styles when it recieves the same prop.
- You can pass isInvalid or isDisabled to a <FormControl /> which surrounds this component and it will output their corresponding <Input /> styles.

Check out the demo here: https://codesandbox.io/s/chakra-react-select-demo-65ohb?file=/example.js

And if you have any other questions or requests, leave it as an issue. I'm sure there are some features of react-select that I missed and I definitely want to make this wrapper as good as it can be!

Keywords

FAQs

What is chakra-react-select?

Is chakra-react-select popular?

Is chakra-react-select well maintained?

Last updated on 14 Sep 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install