1.4.5 • Published 4 years ago

chakra-ui-autocomplete-adapted v1.4.5

Weekly downloads
-
License
MIT
Repository
-
Last release
4 years ago

Chakra-UI AutoComplete-adapted

An Accessible Autocomplete Utility for Chakra UI that composes Downshift ComboBox

demo-image

Install

*Warning This Package is still WIP at the Moment and there might be some missing features

npm install --save chakra-ui-autocomplete-adapted

Usage

  • Usage Example with TSX/Typescript
import React from 'react'
import { CUIAutoComplete } from 'chakra-ui-autocomplete'

export interface Item {
  label: string
  value: string
}
const countries = [
  { value: 'ghana', label: 'Ghana' },
  { value: 'nigeria', label: 'Nigeria' },
  { value: 'kenya', label: 'Kenya' },
  { value: 'southAfrica', label: 'South Africa' },
  { value: 'unitedStates', label: 'United States' },
  { value: 'canada', label: 'Canada' },
  { value: 'germany', label: 'Germany' }
]

export default function App() {
  const [pickerItems, setPickerItems] = React.useState(countries)
  const [selectedItems, setSelectedItems] = React.useState<Item[]>([])

  const handleCreateItem = (item: Item) => {
    setPickerItems((curr) => [...curr, item])
    setSelectedItems((curr) => [...curr, item])
  }

  const handleSelectedItemsChange = (selectedItems?: Item[]) => {
    if (selectedItems) {
      setSelectedItems(selectedItems)
    }
  }

  return (
    <CUIAutoComplete
      label='Choose preferred work locations'
      placeholder='Type a Country'
      onCreateItem={handleCreateItem}
      items={pickerItems}
      selectedItems={selectedItems}
      onSelectedItemsChange={(changes) =>
        handleSelectedItemsChange(changes.selectedItems)
      }
    />
  )
}

Props

PropertyTypeRequiredDecscription
itemsArrayYesAn array of the items to be selected within the input field
placeholderstringThe placeholder for the input field
labelstringInput Form Label to describe the activity or process
highlightItemBgstringFor accessibility, you can define a custom color for the highlight color when user is typing also accept props like yellow.300 based on chakra theme provider
onCreateItemFunctionYesFunction to handle creating new Item
optionFilterFuncFunctionYesYou can define a custom Function to handle filter logic
itemRendererFunctionCustom Function that can either return a JSX Element or String, in order to control how the list items within the Dropdown is rendered
labelStylePropsObjectCustom style props based on chakra-ui for labels, Example `{{ bg: 'gray.100', pt: '4'}}
inputStylePropsObjectCustom style props based on chakra-ui for input field, Example`{{ bg: 'gray.100', pt: '4'}}
toggleButtonStylePropsObjectCustom style props based on chakra-ui for toggle button, Example `{{ bg: 'gray.100', pt: '4'}}
tagStylePropsObjectCustom style props based on chakra-ui for multi option tags, Example`{{ bg: 'gray.100', pt: '4'}}
listStylePropsObjectCustom style props based on chakra-ui for dropdown list, Example `{{ bg: 'gray.100', pt: '4'}}
listItemStylePropsObjectCustom style props based on chakra-ui for single list item in dropdown, Example`{{ bg: 'gray.100', pt: '4'}}
selectedIconPropsObjectCustom style props based on chakra-ui for the green tick icon in dropdown list, Example `{{ bg: 'gray.100', pt: '4'}}
iconObjectCheckCircleIcon@chakra-ui/icons Icon to be displayed instead of CheckCircleIcon
hideToggleButtonbooleanHide the toggle button
disableCreateItembooleanDisable the "create new" list Item. Default is false
createItemRendererFunctionCustom Function that can either return a JSX Element or String, in order to control how the create new item within the Dropdown is rendered. The input value is passed as the first function parameter, Example: (value) => `Create ${value}`
renderCustomInputFunctionCustom function to render input from outside chakra-ui-autocomplete. Receives input props for the input element and toggleButtonProps for the toggle button. Can use this to render chakra-ui's <InputGroup>. Example: (inputProps) => (<InputGroup><InputLeftElement pointerEvents="none" children={<PhoneIcon color="gray.300" />} /><Input {...inputProps} /></InputGroup>)

Author

koolamusic

License

MIT © koolamusic