cm
chakra-multiselect
npm i chakra-multiselect
cm

chakra-multiselect

A ChakraUI infused Multiselect component

by bmartel

0.3.7 (see all)License:MITTypeScript:Not Found
npm i chakra-multiselect
Readme

chakra-multiselect

A Multiselect component using ChakraUI

NPM Package Size JavaScript Style Guide

Install

npm install --save 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

Downloads/wk

376

GitHub Stars

14

LAST COMMIT

5mos ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

2

OPEN PRs

0
VersionTagPublished
0.3.7
latest
17d ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate