Chakra ui select
npm install chakra-ui-select> Chakra ui select
 
``bash`
npm install --save chakra-ui-select
`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) => (
value={option}
index={index}
>
{itemToString(option)}
))}
>
)
}}
)
}
`
`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
)}
>
)
}}
)
}
`tsx`
function SelectSingleWrapper() {
return
}
`tsxissues-item-${index}
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) => (
}`
index={index}
selectedItem={selectedItem}
>
{selectedItem.label}
))}
{items.map((option, index) => (
{option.label}
))}
{items.length <= 0 && (
No found
)}
>
)
}}
)
}
`tsx``
function SelectMultipleWrapperExample() {
return
}
MIT © ejoc