Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/koolamusic/chakra-ui-autocomplete
An utility autocomplete UI library to use with Chakra UI
https://github.com/koolamusic/chakra-ui-autocomplete
autocomplete autocompletetextfield chakra-ui downshift hacktoberfest hacktoberfest-accepted hacktoberfest2021 react
Last synced: 3 months ago
JSON representation
An utility autocomplete UI library to use with Chakra UI
- Host: GitHub
- URL: https://github.com/koolamusic/chakra-ui-autocomplete
- Owner: koolamusic
- Created: 2020-09-29T02:32:23.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-04-10T21:21:42.000Z (10 months ago)
- Last Synced: 2024-04-14T01:33:08.596Z (10 months ago)
- Topics: autocomplete, autocompletetextfield, chakra-ui, downshift, hacktoberfest, hacktoberfest-accepted, hacktoberfest2021, react
- Language: TypeScript
- Homepage: https://koolamusic.github.io/chakra-ui-autocomplete/
- Size: 4.16 MB
- Stars: 329
- Watchers: 4
- Forks: 39
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-chakra-ui - Chakra-ui-autocomplete
README
# Chakra-UI AutoComplete
[](#contributors-)
[](https://opencollective.com/chakra-ui-autocomplete) [](#contributors-)
> An Accessible Autocomplete Utility for [Chakra UI](github.com/chakra-ui/chakra-ui) that composes [Downshift](https://github.com/downshift-js/downshift) ComboBox
[](https://www.npmjs.com/package/chakra-ui-autocomplete) [](https://standardjs.com)
## Install
**Warning* This Package is still WIP at the Moment and there might be some missing features
```bash
npm install --save chakra-ui-autocomplete
```
## Usage
- Usage Example with TSX/Typescript
```tsx
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([]);
const handleCreateItem = (item: Item) => {
setPickerItems((curr) => [...curr, item]);
setSelectedItems((curr) => [...curr, item]);
};
const handleSelectedItemsChange = (selectedItems?: Item[]) => {
if (selectedItems) {
setSelectedItems(selectedItems);
}
};
return (
handleSelectedItemsChange(changes.selectedItems)
}
/>
);
}
```
---
- Usage Example with JSX/Javascript
```jsx
import React from 'react'
import { CUIAutoComplete } from 'chakra-ui-autocomplete'
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([]);
const handleCreateItem = (item) => {
setPickerItems((curr) => [...curr, item]);
setSelectedItems((curr) => [...curr, item]);
};
const handleSelectedItemsChange = (selectedItems) => {
if (selectedItems) {
setSelectedItems(selectedItems);
}
};
return (
{
handleSelectedItemsChange(changes.selectedItems)
}}}
/>
);
}
```
[View on CodeSandbox](https://codesandbox.io/s/chakra-ui-autocomplete-example1-8uxbs)
[](https://codesandbox.io/s/chakra-ui-autocomplete-example1-8uxbs)
### Usage Example with Custom Item Renderer
```jsx
import React from 'react'
import { Text, Flex, Avatar } from '@chakra-ui/react'
import { CUIAutoComplete } from 'chakra-ui-autocomplete'
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([]);
const handleCreateItem = (item) => {
setPickerItems((curr) => [...curr, item]);
setSelectedItems((curr) => [...curr, item]);
};
const handleSelectedItemsChange = (selectedItems) => {
if (selectedItems) {
setSelectedItems(selectedItems);
}
};
const customRender = (selected) => {
return (
{selected.label}
)
}
const customCreateItemRender = (value) => {
return (
Create{' '}
"{value}"
)
}
return (
handleSelectedItemsChange(changes.selectedItems)
}
/>
);
}
```
## Props
| Property | Type | Required | Decscription |
| ---------------------- | -------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| items | Array | Yes | An array of the items to be selected within the input field |
| placeholder | string | | The placeholder for the input field |
| label | string | Yes | Input Form Label to describe the activity or process |
| highlightItemBg | string | | For 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 |
| onCreateItem | Function | Yes | Function to handle creating new Item |
| optionFilterFunc | Function | | You can define a custom Function to handle filter logic |
| itemRenderer | Function | | Custom Function that can either return a JSX Element or String, in order to control how the list items within the Dropdown is rendered |
| labelStyleProps | Object | | Custom style props based on chakra-ui for labels, Example `{{ bg: 'gray.100', pt: '4'}} |
| inputStyleProps | Object | | Custom style props based on chakra-ui for input field, Example`{{ bg: 'gray.100', pt: '4'}} |
| toggleButtonStyleProps | Object | | Custom style props based on chakra-ui for toggle button, Example `{{ bg: 'gray.100', pt: '4'}} |
| tagStyleProps | Object | | Custom style props based on chakra-ui for multi option tags, Example`{{ bg: 'gray.100', pt: '4'}} |
| listStyleProps | Object | | Custom style props based on chakra-ui for dropdown list, Example `{{ bg: 'gray.100', pt: '4'}} |
| listItemStyleProps | Object | | Custom style props based on chakra-ui for single list item in dropdown, Example`{{ bg: 'gray.100', pt: '4'}} |
| selectedIconProps | Object | | Custom style props based on chakra-ui for the green tick icon in dropdown list, Example `{{ bg: 'gray.100', pt: '4'}} |
| icon | Object | CheckCircleIcon | @chakra-ui/icons Icon to be displayed instead of CheckCircleIcon |
| hideToggleButton | boolean | | Hide the toggle button |
| disableCreateItem | boolean | | Disable the "create new" list Item. Default is `false` |
| createItemRenderer | Function | | Custom 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}` ``` |
| renderCustomInput | Function | | Custom 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 ``````. Example: ```(inputProps) => (} />)```
## Todo
- [ ] Add Combobox Support for Single Select [Downshift Combobox](https://downshift.netlify.app/use-combobox)
- [x] Multi Select Support
- [x] Feature to Create when not in list
- [x] Add prop for Items Renderer to enable rendering of React Element
- [ ] Ability to define `chakra-ui components` that will render in place of `Tags, MenuList, TextInput, Form Label` will check render props or headless UI patterns.
## Contributors
### Code Contributors
Arafat Zahan
💻
João Viana
💻
Hamed Sedighi
💻
Akash Singh
💻
Anthony Master
📖 ⚠️ 💻
Vidur Murali
💻
Marco Nalon
⚠️ 💻 📖
U.M Andrew
📖 ⚠️ 💻
sr.cristofher
📖
This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
### Financial Contributors
Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/chakra-ui-autocomplete/contribute)]
#### Individuals
#### Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/chakra-ui-autocomplete/contribute)]
## License
MIT © [koolamusic](https://github.com/koolamusic)