chakra-multiselect
v0.4.13
Published
A Multiselect component using ChakraUI
Downloads
17,973
Readme
chakra-multiselect
A Multiselect component using ChakraUI
Install ChakraUI
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
or
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Install ChakraMultiselect
npm i chakra-multiselect
or
yarn add chakra-multiselect
Usage
Ensure your application has a ChakraProvider
wrapping your Application's main component (ex. <App />
).
Include the MultiSelectTheme as a component in the theme declarations.
See https://bmartel.github.io/chakra-multiselect/docs for full documentation.
import { ChakraProvider, extendTheme } from '@chakra-ui/react'
import { MultiSelectTheme } from 'chakra-multiselect'
const theme = extendTheme({
components: {
MultiSelect: MultiSelectTheme
}
})
const App = () => (
<ChakraProvider theme={theme}>
{/* ... */}
</ChakraProvider>
)
Single Mode
import { MultiSelect } from 'chakra-multiselect'
const Component = () => {
const [value, setValue] = useState('')
return (
<MultiSelect
options={options}
value={value}
label='Choose an item'
onChange={setValue}
single
/>
)
}
Multi Mode
import { MultiSelect } from 'chakra-multiselect'
const Component = () => {
const [value, setValue] = useState([])
return (
<MultiSelect
options={options}
value={value}
label='Choose an item'
onChange={setValue}
/>
)
}
Single + Create Mode
import { MultiSelect, useMultiSelect } from 'chakra-multiselect'
const Component = () => {
const { value, options, onChange } = useMultiSelect({
value: '',
options: []
})
return (
<MultiSelect
options={options}
value={value}
label='Choose or create an item'
onChange={onChange}
create
single
/>
)
}
Multi + Create Mode
import { MultiSelect, useMultiSelect } from 'chakra-multiselect'
const Component = () => {
const { value, options, onChange } = useMultiSelect({
value: [],
options: []
})
return (
<MultiSelect
options={options}
value={value}
label='Choose or create items'
onChange={onChange}
create
/>
)
}
License
MIT © bmartel