Employee Spotlight
From Academia to Industry
Philipp Burckhardt recounts his journey from childhood computer fascinations, to building an e-learning platform at Carnegie Mellon University, and on to his current role at Socket.
chakra-react-select
Advanced tools
A chakra-ui wrapper for the popular select library react-select
Package description
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.
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;
react-select is a flexible and customizable select component for React applications. It provides a wide range of features including single and multi-select, async options, and custom styling. chakra-react-select builds on top of react-select by integrating it with Chakra UI's design system.
downshift is a library that provides primitives to build flexible and accessible autocomplete, combobox, and select components. Unlike chakra-react-select, downshift does not come with built-in styles and requires more manual setup for styling and configuration.
react-autosuggest is a library for building autocomplete and autosuggest components in React. It focuses on providing a robust and accessible autocomplete experience. While it offers similar functionality to chakra-react-select, it does not integrate with Chakra UI and requires custom styling.
Readme
This component is a wrapper for the popular react component react-select made using the UI library Chakra UI.
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.
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).isFixed
to emulate the example in the react-select docs.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.
colorScheme
value to any of your options objects and it will only style that option when selected.isInvalid
to the select component to style it like the Chakra <Input />
is styles when it recieves the same prop.
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!
FAQs
A Chakra UI wrapper for the popular library React Select
The npm package chakra-react-select receives a total of 114,904 weekly downloads. As such, chakra-react-select popularity was classified as popular.
We found that chakra-react-select demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
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.
Employee Spotlight
Philipp Burckhardt recounts his journey from childhood computer fascinations, to building an e-learning platform at Carnegie Mellon University, and on to his current role at Socket.
Security News
Git dependencies in open source packages can introduce significant risks, including lack of version control, stability issues, dependency drift, and difficulty in auditing, making them potential targets for supply chain attacks.
Security News
Node.js has added experimental support for TypeScript, a move that highlights the growing importance of TypeScript in modern development.