chakra-ui-select

> Chakra ui select

 

Install

``bash
npm install --save chakra-ui-select
`

Basic Usage

`tsx
import React, { Component } from 'react'
import { chakra, ChakraProvider, extendTheme, Icon } from '@chakra-ui/react'
import { ChevronDownIcon } from '@chakra-ui/icons'
import { matchSorter } from 'match-sorter'

import {
theme as selectTheme,
SelectSingle,
SelectControl,
SelectIndicator,
SelectMenu,
SelectMenuList,
SelectOption,
SelectValue
} from 'chakra-ui-select'

const theme = extendTheme({
components: { ...selectTheme }
})

const fruits = [
{ value: 'apple', label: 'Apple' },
{ value: 'pear', label: 'Pear' },
{ value: 'orange', label: 'Orange' },
{ value: 'grape', label: 'Grape' },
{ value: 'banana', label: 'Banana' }
]

const fruitValues = fruits.map((item) => item.value)
const itemToString = (item: Option | null) => item?.label ?? ''

function Example() {
return (


{({ selectedItem }) => {
return (
<>



{itemToString(selectedItem)}










{fruits.map((option, index) => (
key={option.value}
value={option}
index={index}
>
{itemToString(option)}

))}



)
}}


)
}
`

Autocomplete example

`tsx
function AutocompleteExample() {
return (

{({ inputValue }) => {
const getFilteredItems = (items: Option[]) => {
return matchSorter(items, inputValue ?? '', { keys: ['label'] })
}
const items = getFilteredItems(fruits)
return (
<>












{items.map((option, index) => (

{itemToString(option)}

))}
{items.length <= 0 && (

No found

)}



)
}}

)
}
`

Select Single Wrapper example

`tsx
function SelectSingleWrapper() {
return
}
`

Select Multiple example

`tsx
function SelectMultipleExample() {
return (

{({ selectedItems, inputValue, getLabelProps }) => {
const getFilteredItems = (items: Option[]) => {
return items.filter((item: Option) => {
if (inputValue) {
return (
selectedItems.indexOf(item) < 0 &&
itemToString(item)
.toLowerCase()
.startsWith(inputValue.toLowerCase())
)
}
return selectedItems.indexOf(item) < 0
})
}
const items = getFilteredItems(fruits)
return (
<>


{selectedItems?.map((selectedItem, index) => (
key={issues-item-${index}}
index={index}
selectedItem={selectedItem}
>
{selectedItem.label}

))}










{items.map((option, index) => (

{option.label}

))}
{items.length <= 0 && (

No found

)}



)
}}

)
}
`

Select Multiple Wrapper example

`tsx
function SelectMultipleWrapperExample() {
return
}
``

License

MIT © ejoc