{"_id":"@blinkstrike/chakra-ui-autocomplete","_rev":"2-26d4bf80b203a10cee75cc2fec22f5e0","name":"@blinkstrike/chakra-ui-autocomplete","dist-tags":{"latest":"2.0.0"},"versions":{"1.4.6":{"name":"@blinkstrike/chakra-ui-autocomplete","version":"1.4.6","keywords":["Chakra UI","downshift","autocomplete","combobox","react","chakra-ui","multiselect-chakra-ui"],"author":{"name":"Andrew Miracle","email":"me@andrewmiracle.com"},"license":"MIT","_id":"@blinkstrike/chakra-ui-autocomplete@1.4.6","maintainers":[{"name":"blink-strike","email":"cekajerlind@gmail.com"}],"homepage":"https://github.com/koolamusic/chakra-ui-autocomplete#readme","bugs":{"url":"https://github.com/koolamusic/chakra-ui-autocomplete/issues"},"dist":{"shasum":"e5d975f120166af81661e03ae942b1d29a6a6864","tarball":"https://registry.npmjs.org/@blinkstrike/chakra-ui-autocomplete/-/chakra-ui-autocomplete-1.4.6.tgz","fileCount":10,"integrity":"sha512-iIzsRJhmuOd2YU+SDEUA0YtnxIJs7gjZTm4sKQMXo0+TcY+WzIyucfCXwiKZUZnU+MN1nKGVnGNV7W7jOneGEw==","signatures":[{"sig":"MEUCIAFL8LEJ5YTCUCTdf0RmaNUa2HAT+ZJcrF5IT6hRkQKCAiEAsJfahsMcD77Y79oeNPm/bLjthX/omJds1T8Wy937kP0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":157929},"main":"dist/index.js","module":"dist/index.js","source":"src/index.tsx","engines":{"node":">=10"},"gitHead":"a08c999136a0a9ab5478c0a1ed2eebf391bfaffe","scripts":{"test":"tsdx test","build":"rimraf dist && tsdx build","start":"tsdx watch","deploy":"gh-pages -d example/build","prepare":"run-s build","test:tsc":"tsc --pretty --noEmit","predeploy":"cd example && npm install && npm run build","test:lint":"eslint ./src --ext ts --ext tsx --fix","test:unit":"cross-env CI=1 react-scripts test --env=jsdom","test:build":"run-s build","test:watch":"react-scripts test --env=jsdom"},"typings":"dist/index.d.ts","_npmUser":{"name":"blink-strike","actor":{"name":"blink-strike","type":"user","email":"cekajerlind@gmail.com"},"email":"cekajerlind@gmail.com"},"repository":{"url":"git+https://github.com/koolamusic/chakra-ui-autocomplete.git","type":"git"},"_npmVersion":"11.4.1","description":"An accessible autocomplete utility library built for chakra UI","directories":{},"_nodeVersion":"22.14.0","dependencies":{"downshift":"^8.2.3","react-use":"^17.4.2","match-sorter":"^6.3.1","@chakra-ui/icons":"^2.1.1","react-highlight-words":"^0.20.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsdx":"^0.14.1","react":"^18.2.0","tslib":"^2.6.2","eslint":"^8.55.0","rimraf":"^5.0.5 ","gh-pages":"^2.2.0","prettier":"^3.1.0","cross-env":"^7.0.3","react-dom":"^18.2.0","typescript":"^5.3.2","@types/jest":"^25.1.4","@types/node":"^20.10.3","npm-run-all":"^4.1.5","@types/react":"^18.2.42","framer-motion":"^10.16.14","react-scripts":"^4.0.3","@emotion/react":"^11.11.1","@emotion/styled":"^11.11.0","@chakra-ui/react":"^2.8.2","@types/react-dom":"^18.2.17","eslint-plugin-node":"^11.1.0","@types/match-sorter":"^4.0.0","eslint-plugin-react":"^7.33.2","react-test-renderer":"^17.0.1","eslint-plugin-import":"^2.29.0","@testing-library/react":"^9.5.0","eslint-config-prettier":"^6.7.0","eslint-config-standard":"^17.1.0","eslint-plugin-prettier":"^5.0.1","@testing-library/jest-dom":"^4.2.4","@typescript-eslint/parser":"^2.26.0","@types/react-test-renderer":"^16.9.3","@testing-library/user-event":"^7.2.1","@types/react-highlight-words":"^0.16.7","@typescript-eslint/eslint-plugin":"^2.26.0"},"peerDependencies":{"react":">= 16.8.1","framer-motion":">= 2.9.4","@chakra-ui/react":">= 1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/chakra-ui-autocomplete_1.4.6_1752039574329_0.8578971690963797","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"@blinkstrike/chakra-ui-autocomplete","version":"2.0.0","description":"An accessible autocomplete utility library built for chakra UI","author":{"name":"BlinkStrike","email":"me@blinkstrike.com"},"license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","module":"dist/index.js","source":"src/index.tsx","engines":{"node":">=10"},"scripts":{"start":"tsdx watch","build":"rimraf dist && tsdx build","test":"tsdx test","test:tsc":"tsc --pretty --noEmit","prepare":"run-s build","test:build":"run-s build","test:lint":"eslint ./src --ext ts --ext tsx --fix","test:unit":"cross-env CI=1 react-scripts test --env=jsdom","test:watch":"react-scripts test --env=jsdom","predeploy":"cd example && npm install && npm run build","deploy":"gh-pages -d example/build"},"peerDependencies":{"@chakra-ui/react":">= 1.0.0","framer-motion":">= 2.9.4","react":">= 16.8.1"},"devDependencies":{"@chakra-ui/react":"^2.8.2","@emotion/react":"^11.11.1","@emotion/styled":"^11.11.0","@testing-library/jest-dom":"^4.2.4","@testing-library/react":"^9.5.0","@testing-library/user-event":"^7.2.1","@types/jest":"^25.1.4","@types/match-sorter":"^4.0.0","@types/node":"^20.10.3","@types/react":"^18.2.42","@types/react-dom":"^18.2.17","@types/react-highlight-words":"^0.16.7","@types/react-test-renderer":"^16.9.3","@typescript-eslint/eslint-plugin":"^2.26.0","@typescript-eslint/parser":"^2.26.0","cross-env":"^7.0.3","eslint":"^8.55.0","eslint-config-prettier":"^6.7.0","eslint-config-standard":"^17.1.0","eslint-plugin-import":"^2.29.0","eslint-plugin-node":"^11.1.0","eslint-plugin-prettier":"^5.0.1","eslint-plugin-react":"^7.33.2","framer-motion":"^10.16.14","gh-pages":"^2.2.0","npm-run-all":"^4.1.5","prettier":"^3.1.0","react":"^18.2.0","react-dom":"^18.2.0","react-scripts":"^4.0.3","react-test-renderer":"^17.0.1","rimraf":"^5.0.5 ","tsdx":"^0.14.1","tslib":"^2.6.2","typescript":"^5.3.2"},"publishConfig":{"access":"public"},"keywords":["Chakra UI","downshift","autocomplete","combobox","react","chakra-ui","multiselect-chakra-ui"],"repository":{"type":"git","url":"git+https://github.com/blinkstrike/chakra-ui-autocomplete.git"},"dependencies":{"@chakra-ui/icons":"^2.1.1","downshift":"^8.2.3","match-sorter":"^6.3.1","react-highlight-words":"^0.20.0","react-use":"^17.4.2"},"_id":"@blinkstrike/chakra-ui-autocomplete@2.0.0","gitHead":"a08c999136a0a9ab5478c0a1ed2eebf391bfaffe","bugs":{"url":"https://github.com/blinkstrike/chakra-ui-autocomplete/issues"},"homepage":"https://github.com/blinkstrike/chakra-ui-autocomplete#readme","_nodeVersion":"22.14.0","_npmVersion":"11.4.1","dist":{"integrity":"sha512-Q3zaWHAjs+DLOgnjsJPRuOZ1aQWTiRqE6PXL0gAalqOAR14/nKtj8X3svTqmD9lFRHjGr8hQ+FUVRMCdE21fOQ==","shasum":"cb79243796e3c1d944236de50346056b4df4a2d2","tarball":"https://registry.npmjs.org/@blinkstrike/chakra-ui-autocomplete/-/chakra-ui-autocomplete-2.0.0.tgz","fileCount":10,"unpackedSize":157925,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBXC95z0+qLNNQqhn0/bwKDnKQ7Xig5LoljEez14Q2UxAiEAqYECni8Y5PTgB1gsG0ElP/Ztrw++/ubR9PzJz4tZPmc="}]},"_npmUser":{"name":"blink-strike","email":"cekajerlind@gmail.com","actor":{"name":"blink-strike","email":"cekajerlind@gmail.com","type":"user"}},"directories":{},"maintainers":[{"name":"blink-strike","email":"cekajerlind@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/chakra-ui-autocomplete_2.0.0_1752039868048_0.008105552134142657"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-09T05:39:34.231Z","modified":"2025-07-09T05:44:28.407Z","1.4.6":"2025-07-09T05:39:34.520Z","2.0.0":"2025-07-09T05:44:28.202Z"},"bugs":{"url":"https://github.com/blinkstrike/chakra-ui-autocomplete/issues"},"author":{"name":"BlinkStrike","email":"me@blinkstrike.com"},"license":"MIT","homepage":"https://github.com/blinkstrike/chakra-ui-autocomplete#readme","keywords":["Chakra UI","downshift","autocomplete","combobox","react","chakra-ui","multiselect-chakra-ui"],"repository":{"type":"git","url":"git+https://github.com/blinkstrike/chakra-ui-autocomplete.git"},"description":"An accessible autocomplete utility library built for chakra UI","maintainers":[{"name":"blink-strike","email":"cekajerlind@gmail.com"}],"readme":"# Chakra-UI AutoComplete\r\n\r\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)\r\n\r\n\r\n[![Financial Contributors on Open Collective](https://opencollective.com/chakra-ui-autocomplete/all/badge.svg?label=financial+contributors)](https://opencollective.com/chakra-ui-autocomplete) [![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)\r\n\r\n\r\n> An Accessible Autocomplete Utility for [Chakra UI](github.com/chakra-ui/chakra-ui) that composes [Downshift](https://github.com/downshift-js/downshift) ComboBox\r\n\r\n[![NPM](https://img.shields.io/npm/v/chakra-ui-autocomplete.svg)](https://www.npmjs.com/package/chakra-ui-autocomplete) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\r\n\r\n![demo-image](./img/basic.gif)\r\n\r\n## Install\r\n\r\n**Warning* This Package is still WIP at the Moment and there might be some missing features\r\n\r\n```bash\r\nnpm install --save chakra-ui-autocomplete\r\n```\r\n\r\n## Usage\r\n\r\n- Usage Example with TSX/Typescript\r\n\r\n```tsx\r\nimport React from 'react'\r\nimport { CUIAutoComplete } from 'chakra-ui-autocomplete'\r\n\r\n\r\nexport interface Item {\r\n label: string;\r\n value: string;\r\n}\r\nconst countries = [\r\n { value: \"ghana\", label: \"Ghana\" },\r\n { value: \"nigeria\", label: \"Nigeria\" },\r\n { value: \"kenya\", label: \"Kenya\" },\r\n { value: \"southAfrica\", label: \"South Africa\" },\r\n { value: \"unitedStates\", label: \"United States\" },\r\n { value: \"canada\", label: \"Canada\" },\r\n { value: \"germany\", label: \"Germany\" }\r\n];\r\n\r\nexport default function App() {\r\n const [pickerItems, setPickerItems] = React.useState(countries);\r\n const [selectedItems, setSelectedItems] = React.useState([]);\r\n\r\n const handleCreateItem = (item: Item) => {\r\n setPickerItems((curr) => [...curr, item]);\r\n setSelectedItems((curr) => [...curr, item]);\r\n };\r\n\r\n const handleSelectedItemsChange = (selectedItems?: Item[]) => {\r\n if (selectedItems) {\r\n setSelectedItems(selectedItems);\r\n }\r\n };\r\n\r\n return (\r\n \r\n handleSelectedItemsChange(changes.selectedItems)\r\n }\r\n />\r\n );\r\n}\r\n```\r\n\r\n---\r\n\r\n- Usage Example with JSX/Javascript\r\n\r\n```jsx\r\nimport React from 'react'\r\nimport { CUIAutoComplete } from 'chakra-ui-autocomplete'\r\n\r\nconst countries = [\r\n { value: \"ghana\", label: \"Ghana\" },\r\n { value: \"nigeria\", label: \"Nigeria\" },\r\n { value: \"kenya\", label: \"Kenya\" },\r\n { value: \"southAfrica\", label: \"South Africa\" },\r\n { value: \"unitedStates\", label: \"United States\" },\r\n { value: \"canada\", label: \"Canada\" },\r\n { value: \"germany\", label: \"Germany\" }\r\n];\r\n\r\nexport default function App() {\r\n const [pickerItems, setPickerItems] = React.useState(countries);\r\n const [selectedItems, setSelectedItems] = React.useState([]);\r\n\r\n const handleCreateItem = (item) => {\r\n setPickerItems((curr) => [...curr, item]);\r\n setSelectedItems((curr) => [...curr, item]);\r\n };\r\n\r\n const handleSelectedItemsChange = (selectedItems) => {\r\n if (selectedItems) {\r\n setSelectedItems(selectedItems);\r\n }\r\n };\r\n\r\n return (\r\n {\r\n handleSelectedItemsChange(changes.selectedItems)\r\n }}}\r\n />\r\n );\r\n}\r\n```\r\n\r\n[View on CodeSandbox](https://codesandbox.io/s/chakra-ui-autocomplete-example1-8uxbs)\r\n[![109296467-3cdbe100-7828-11eb-9491-1bd069bf90a4](https://user-images.githubusercontent.com/587136/109479134-1922d000-7aa0-11eb-9a7f-14d3a5f0d63d.png)](https://codesandbox.io/s/chakra-ui-autocomplete-example1-8uxbs)\r\n\r\n### Usage Example with Custom Item Renderer\r\n\r\n![custom-render-image](./img/custom-example.gif)\r\n\r\n\r\n```jsx\r\nimport React from 'react'\r\nimport { Text, Flex, Avatar } from '@chakra-ui/react'\r\nimport { CUIAutoComplete } from 'chakra-ui-autocomplete'\r\n\r\n\r\nconst countries = [\r\n { value: \"ghana\", label: \"Ghana\" },\r\n { value: \"nigeria\", label: \"Nigeria\" },\r\n { value: \"kenya\", label: \"Kenya\" },\r\n { value: \"southAfrica\", label: \"South Africa\" },\r\n { value: \"unitedStates\", label: \"United States\" },\r\n { value: \"canada\", label: \"Canada\" },\r\n { value: \"germany\", label: \"Germany\" }\r\n];\r\n\r\nexport default function App() {\r\n const [pickerItems, setPickerItems] = React.useState(countries);\r\n const [selectedItems, setSelectedItems] = React.useState([]);\r\n\r\n const handleCreateItem = (item) => {\r\n setPickerItems((curr) => [...curr, item]);\r\n setSelectedItems((curr) => [...curr, item]);\r\n };\r\n\r\n const handleSelectedItemsChange = (selectedItems) => {\r\n if (selectedItems) {\r\n setSelectedItems(selectedItems);\r\n }\r\n };\r\n\r\n const customRender = (selected) => {\r\n return (\r\n \r\n \r\n {selected.label}\r\n \r\n )\r\n }\r\n\r\n const customCreateItemRender = (value) => {\r\n return (\r\n \r\n Create{' '}\r\n \r\n \"{value}\"\r\n \r\n \r\n )\r\n }\r\n\r\n\r\n\r\n return (\r\n \r\n handleSelectedItemsChange(changes.selectedItems)\r\n }\r\n />\r\n );\r\n}\r\n\r\n```\r\n\r\n## Props\r\n\r\n| Property | Type | Required | Decscription |\r\n| ---------------------- | -------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| items | Array | Yes | An array of the items to be selected within the input field |\r\n| placeholder | string | | The placeholder for the input field |\r\n| label | string | Yes | Input Form Label to describe the activity or process |\r\n| 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 |\r\n| onCreateItem | Function | Yes | Function to handle creating new Item |\r\n| optionFilterFunc | Function | | You can define a custom Function to handle filter logic |\r\n| 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 |\r\n| labelStyleProps | Object | | Custom style props based on chakra-ui for labels, Example `{{ bg: 'gray.100', pt: '4'}} |\r\n| inputStyleProps | Object | | Custom style props based on chakra-ui for input field, Example`{{ bg: 'gray.100', pt: '4'}} |\r\n| toggleButtonStyleProps | Object | | Custom style props based on chakra-ui for toggle button, Example `{{ bg: 'gray.100', pt: '4'}} |\r\n| tagStyleProps | Object | | Custom style props based on chakra-ui for multi option tags, Example`{{ bg: 'gray.100', pt: '4'}} |\r\n| listStyleProps | Object | | Custom style props based on chakra-ui for dropdown list, Example `{{ bg: 'gray.100', pt: '4'}} |\r\n| listItemStyleProps | Object | | Custom style props based on chakra-ui for single list item in dropdown, Example`{{ bg: 'gray.100', pt: '4'}} |\r\n| selectedIconProps | Object | | Custom style props based on chakra-ui for the green tick icon in dropdown list, Example `{{ bg: 'gray.100', pt: '4'}} |\r\n| icon | Object | CheckCircleIcon | @chakra-ui/icons Icon to be displayed instead of CheckCircleIcon |\r\n| hideToggleButton | boolean | | Hide the toggle button |\r\n| disableCreateItem | boolean | | Disable the \"create new\" list Item. Default is `false` |\r\n| 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}` ``` |\r\n| 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) => (} />)```\r\n\r\n## Todo\r\n\r\n- [ ] Add Combobox Support for Single Select [Downshift Combobox](https://downshift.netlify.app/use-combobox)\r\n- [x] Multi Select Support\r\n- [x] Feature to Create when not in list\r\n- [x] Add prop for Items Renderer to enable rendering of React Element\r\n- [ ] 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.\r\n\r\n## Contributors\r\n\r\n### Code Contributors\r\n\r\n\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\"\"/
Arafat Zahan
💻		\"\"/
João Viana
💻		\"\"/
Hamed Sedighi
💻		\"\"/
Akash Singh
💻		\"\"/
Anthony Master
📖 ⚠️ 💻		\"\"/
Vidur Murali
💻		\"\"/
Marco Nalon
⚠️ 💻 📖		\"\"/
U.M Andrew
📖 ⚠️ 💻		\"\"/
sr.cristofher
📖
\r\n\r\n\r\n\r\n\r\n\r\n\r\nThis project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].\r\n\r\n\r\n### Financial Contributors\r\n\r\nBecome a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/chakra-ui-autocomplete/contribute)]\r\n\r\n#### Individuals\r\n\r\n\r\n\r\n#### Organizations\r\n\r\nSupport 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)]\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n## License\r\n\r\nMIT © [koolamusic](https://github.com/koolamusic)\r\n","readmeFilename":"README.md"}