{"id":23465911,"url":"https://github.com/andrelandgraf/react-datalist-input","last_synced_at":"2025-04-14T11:32:21.097Z","repository":{"id":38630344,"uuid":"141174075","full_name":"andrelandgraf/react-datalist-input","owner":"andrelandgraf","description":"This package provides a reactjs component that contains an input field with a drop down menu to pick a possible option based on the current input.","archived":false,"fork":false,"pushed_at":"2023-03-07T20:28:22.000Z","size":3013,"stargazers_count":27,"open_issues_count":30,"forks_count":12,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-14T05:57:32.447Z","etag":null,"topics":["autocomplete","highlighting","input","input-field","reactjs","reactjs-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andrelandgraf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-16T18:02:05.000Z","updated_at":"2024-08-07T04:44:48.000Z","dependencies_parsed_at":"2024-06-19T17:11:07.301Z","dependency_job_id":"440464d6-087e-4313-a87a-47d618ed055b","html_url":"https://github.com/andrelandgraf/react-datalist-input","commit_stats":{"total_commits":127,"total_committers":4,"mean_commits":31.75,"dds":0.3228346456692913,"last_synced_commit":"9d47a1f3c44c5233094e9895ce4e5d1c06974a94"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrelandgraf%2Freact-datalist-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrelandgraf%2Freact-datalist-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrelandgraf%2Freact-datalist-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrelandgraf%2Freact-datalist-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andrelandgraf","download_url":"https://codeload.github.com/andrelandgraf/react-datalist-input/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248871940,"owners_count":21175321,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["autocomplete","highlighting","input","input-field","reactjs","reactjs-components"],"created_at":"2024-12-24T11:49:29.021Z","updated_at":"2025-04-14T11:32:21.058Z","avatar_url":"https://github.com/andrelandgraf.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Simple demo of DatalistInput](/media/demo.gif)\n\n# react-datalist-input\n\nreact-datalist-input provides a React datalist/combobox component called DatalistInput. The component contains an input field with a dropdown menu of suggestions based on the current input.\n\n_DatalistInput is intended to be easy to use and comes with default styling:_\n\n```jsx\nimport DatalistInput from 'react-datalist-input';\nimport 'react-datalist-input/dist/styles.css';\n\nconst YourComponent = () =\u003e (\n  \u003cDatalistInput\n    placeholder=\"Chocolate\"\n    label=\"Select ice cream flavor\"\n    onSelect={(item) =\u003e console.log(item.value)}\n    items={[\n      { id: 'Chocolate', value: 'Chocolate' },\n      { id: 'Coconut', value: 'Coconut' },\n      { id: 'Mint', value: 'Mint' },\n      { id: 'Strawberry', value: 'Strawberry' },\n      { id: 'Vanilla', value: 'Vanilla' },\n    ]}\n  /\u003e\n);\n```\n\n_But DatalistInput is also intended to be easy to extend:_\n\n```jsx\nimport DatalistInput, { useComboboxControls } from 'react-datalist-input';\n\nconst YourComponent = () =\u003e {\n  const { setValue, value } = useComboboxControls({ initialValue: 'Chocolate' });\n\n  return (\n    \u003cDatalistInput\n      value={value}\n      setValue={setValue}\n      label=\"Select ice cream flavor\"\n      showLabel={false}\n      items={[...]}\n      onSelect={(item) =\u003e {\n        setValue(''); // Custom behavior: Clear input field once a value has been selected\n      }}\n    /\u003e\n  );\n};\n```\n\n## Installation\n\n**Note: React 18 required!** Version 3.0.0 utilizes React 18. If you use React \u003c=17, install `react-datalist-input@2.2.1` instead! Find the documentation for version 2.2.1 [here](https://github.com/andrelandgraf/react-datalist-input/blob/bab05504c0dffa5f9343f2fcb5f075a38bad2512/README.md).\n\n### npm\n\n```bash\nnpm i react-datalist-input\n```\n\n### yarn\n\n```bash\nyarn add react-datalist-input\n```\n\n## When to use this package (and when not to use it)?\n\nTL;DR:\n\n- You want a dropdown of suggestions and not a select element.\n- You tried the datalist HTML 5 element but it doesn't offer the control you need.\n\nThere are [various kinds of dropdown UI controls](https://adrianroselli.com/2020/03/stop-using-drop-down.html). This package implements one of them - the combobox control - as defined by [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/#combobox).\n\nA combobox renders a list of suggested values based on an input field. The user can select an option of the list to autocomplete the input field or type in a value that is not in the list. This is the main difference to the [select control](\u003c[select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)\u003e), where the user must pick a value from the list. You can read more about the differences on [vitalflux.com](https://vitalflux.com/difference-select-datalist/).\n\nIf you don't care about custom functionality or advanced styling, consider using the native [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) HTML5 element. If you require more control, then this package is for you!\n\nYou can also build something tailored to your own use case from scratch! Have a look at [w3schools.com](https://www.w3schools.com/howto/howto_js_autocomplete.asp) to see how to create a autocomplete control with pure HTML, CSS, and JS.\n\n## ARIA\n\nThis package follows the [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/) specification. Be aware that version 1.2 is still in development. If you require a more battle-tested ARIA implementation, consider using [Reach UI](https://reach.tech/combobox/) instead.\n\nThis package does not implement the optional `aria-activedescendant` property but rather programmatically shifts focus to the active item. This might be up to change in the future!\n\n## Feedback \u0026 Issues\n\nPlease provide your [feedback](https://github.com/andrelandgraf/react-datalist-input/issues) on GitHub!\n\n## Versions\n\n- Version 3.x.x is written in TypeScript and requires React 18.\n- Version 2.x.x serves a functional component using hooks.\n- Version 1.x.x serves a class component.\n\nThe documentation below only applies to the latest version. Please find earlier versions of the documentation on [GitHub](https://github.com/andrelandgraf/react-datalist-input), e.g. version [2.2.1](https://github.com/andrelandgraf/react-datalist-input/blob/bab05504c0dffa5f9343f2fcb5f075a38bad2512/README.md).\n\n### Changelog\n\n#### Version 3.2.0\n\n- Better `Item` type definition to make it easier to extend the items array.\n- Renamed `useComoboxHelpersConfigParams` to `UseComboboxHelpersConfigParams`.\n- `useComboboxContext` now exposes the `currentInputValue`, which can be handy when implementing custom item components with highlighting.\n\n#### Version 3.1.0\n\nVersion 3.1.0 changes the default filter from `startsWith` to `includes` to match the behavior of the datalist HTML 5 element. You can read more information about filtering and how to use a custom filter down below (Filtering).\n\n#### Version 3.0.0\n\nFull refactor of react-datalist-input.\n\n- Rewritten in TypeScript\n- Implements WAI-ARIA 1.2\n- Takes advantage of React 18 useDeferredValue and useId\n- Replaces custom debounce with React 18 useDeferredValue\n- New default styles using CSS variables\n- Exposes helper hooks\n- Exposes underlying components for full customization\n\n**Note:** Be aware that version 3.0.0 includes breaking changes. Version 3.0.0 deprecates some properties from the DatalistInput component such as `requiredInputLength`. Instead of using custom properties for different use cases, you have now full control using the `useComboboxControls` hook and the `filters` property. Use plain React state and callbacks to control every aspect of the component's behavior!\n\n#### Version 2.2.0\n\n- Update React peer-dependency version to 17.0.2\n\n#### Version 2.1.0\n\nMotivation: [Issue 23](https://github.com/andrelandgraf/react-datalist-input/issues/23)\n\nOffer optional value prop, in case the user requires full control to change/clear the input value based on side effects\n\nChanges:\n\n- Deprecates optional `initialValue` prop\n- Introduces optional `value` prop instead (default undefined)\n- Introduces optional `clearOnClickInput` prop (default false)\n- Introduces optional `onClick` lifecycle method prop (default empty function)\n\n#### Version 2.0.0\n\nChanges:\n\n- refactors component to functional component using hooks\n- adds `useStateRef` to reduce re-renders and boost performance\n\n## Usage\n\n### Basic Usage\n\n```jsx\nimport React, { useState, useMemo, useCallback } from 'react';\n// Import the DataListInput component\nimport DataListInput from 'react-datalist-input';\n// Integrate the css file if you want to use the default styling\nimport 'react-datalist-input/dist/styles.css';\n\n// Your data source\nconst options = [\n  { name: 'Chocolate' },\n  { name: 'Coconut' },\n  { name: 'Mint' },\n  { name: 'Strawberry' },\n  { name: 'Vanilla' },\n];\n\nconst YourComponent = ({ options }) =\u003e {\n  const [item, setItem] = useState(); // The selected item will be stored in this state.\n\n  /**\n   * The onSelect callback function is called if the user selects one option out of the dropdown menu.\n   * @param selectedItem object (the selected item / option)\n   */\n  const onSelect = useCallback((selectedItem) =\u003e {\n    console.log('selectedItem', selectedItem);\n    setItem(selectedItem);\n  }, []);\n\n  // Make sure each option has an unique id and a value\n  const items = useMemo(\n    () =\u003e\n      options.map((option) =\u003e ({\n        // required: id and value\n        id: option.name,\n        value: option.name,\n        // optional: label, node\n        // label: option.name, // use a custom label instead of the value\n        // node: option.name, // use a custom ReactNode to display the option\n        ...option, // pass along any other properties to access in your onSelect callback\n      })),\n    [],\n  );\n\n  return (\n    \u003cDatalistInput label=\"Select your favorite flavor\" placeholder=\"Chocolate\" items={items} onSelect={onSelect} /\u003e\n  );\n};\n```\n\n### Styling\n\nFor simple use cases, you can use the default styling provided by this package: `import 'react-datalist-input/dist/styles.css'`.\n\nHowever, you can also customize the styling by providing your own CSS! Instead of importing the default stylesheet, create your own one. The following classes are available:\n\n- `react-datalist-input__container`: For the container element.\n- `react-datalist-input__textbox`: For the input element.\n- `react-datalist-input__label`: For the label element.\n- `react-datalist-input__listbox`: For the dropdown list.\n- `react-datalist-input__listbox-option`: For each option in the dropdown list.\n\n**Note:** Use the focus and hover states of `react-datalist-input__listbox-option` to show the user some visual feedback.\n\n```css\n.react-datalist-input__listbox-option:focus {\n  background-color: gray;\n}\n```\n\n**Tip:** To get up and running quickly, just copy-paste the default stylesheet and adapt the pieces you need.\n\n#### Tailwind CSS / Utility Classes\n\nAlternatively, you can also pass custom classes to each element of the DatalistInput component by using the following props:\n\n- `className`: For the container element.\n- `inputProps[\"className\"]`: For the input element.\n- `labelProps[\"className\"]`: For the label element.\n- `listboxProps[\"className\"]`: For the dropdown list.\n- `listboxOptionProps[\"className\"]`: For each option in the dropdown list.\n- `isExpandedClassName`: Applied to the dropdown list if it is expanded.\n- `isCollapsedClassName`: Applied to the dropdown list if it is collapsed. !If provided, you must manage the hiding of the dropdown list yourself!\n\n### Custom Item Components\n\nYou can also customize the rendering of each item in the dropdown list by providing a custom component.\n\n```tsx\nimport { useMemo } from 'react';\nimport type { Item } from '../combobox';\nimport { DatalistInput, useComboboxControls, useComboboxContext } from '../combobox';\n\ntype CustomItem = Item \u0026 {\n  description: string;\n};\n\nconst items: Array\u003cCustomItem\u003e = [\n  { id: 'Chocolate', value: 'Chocolate', description: 'Chocolate is delicious' },\n  { id: 'Coconut', value: 'Coconut', description: 'Coconut is tasty but watch your head!' },\n  { id: 'Mint', value: 'Mint', description: 'Mint is a herb?' },\n  { id: 'Strawberry', value: 'Strawberry', description: 'Strawberries are red' },\n  { id: 'Vanilla', value: 'Vanilla', description: 'Vanilla is a flavor' },\n];\n\nconst CustomItem = ({ item }: { item: CustomItem }) =\u003e {\n  // get access to the combobox context for highlighting, etc.\n  const { currentInputValue, selectedItemId } = useComboboxContext();\n\n  // Each item is wrapped in a li element, so we don't need to provide a custom li element here.\n  return (\n    \u003cdiv\n      style={{\n        display: 'flex',\n        gap: '5px',\n        flexDirection: 'column',\n        background: item.id === selectedItemId ? 'gray' : 'white',\n      }}\n    \u003e\n      \u003cb\u003e{item.value}\u003c/b\u003e\n      \u003cspan\u003e{item.description}\u003c/span\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default function Index() {\n  const customItems = items.map((item) =\u003e ({\n    // each item requires an id and value\n    ...item,\n    // but we can also add a custom component for the item\n    node: \u003cCustomItem item={item} /\u003e,\n  }));\n\n  return (\n    \u003cDatalistInput\n      label={\u003cdiv\u003eCustom Label\u003c/div\u003e}\n      placeholder=\"Chocolate\"\n      items={customItems}\n      onSelect={(i) =\u003e console.log(i)}\n    /\u003e\n  );\n}\n```\n\n**Note:** Please note that by default the Item.value property is used for filtering. In case you want to filter over custom properties, make sure to implement a custom filter function.\n\n### Filtering\n\nBy default, the DatalistInput component will filter the dropdown list based on the value of the input element using the `includes` method. This follows the behavior of the datalist HTMl element. You can however provide your own filtering function by passing a custom `filter` function to the DatalistInput component.\n\nFor instance, this package exposes a `startsWith` alternative filter functions that you can use as follows:\n\n```jsx\nimport { DatalistInput, startsWithValueFilter } from 'react-datalist-input';\n\nconst YourComponent = () =\u003e {\n  return \u003cDatalistInput label=\"Select ice cream flavor\" items={items} filters={[startsWithValueFilter]} /\u003e;\n};\n```\n\nNow, the dropdown list will only show items that start with the input value.\n\nYou can also implement a custom filter function:\n\n```tsx\nimport type { Filter } from 'react-datalist-input';\nimport { DatalistInput } from 'react-datalist-input';\n\nconst YourComponent = () =\u003e {\n  // Custom filter: Display all values that are smaller or equal than the input value\n  const myFilterFunction: Filter = useCallback(\n    (items, value) =\u003e items.filter((item) =\u003e item.value \u003c= value),\n    [selectedItems],\n  );\n\n  return \u003cDatalistInput label=\"Select ice cream flavor\" items={items} filters={[myFilterFunction]} /\u003e;\n};\n```\n\n### Filter Chaining\n\nYou can chain custom filters to filter the list of options displayed in the dropdown menu.\n\nFor instance, display only the first three items in the list:\n\n```tsx\nimport type { Filter } from 'react-datalist-input';\n// Import the default filter startWithValueFilter\nimport { DatalistInput, includesValueFilter } from 'react-datalist-input';\n\nconst YourComponent = () =\u003e {\n  // Custom filter: Only display the first 3 items\n  const limitOptionsFilter: Filter = useCallback((items, value) =\u003e items.slice(0, 3), []);\n\n  // First we filter by the value using the default filter, then we add a custom filter.\n  const filters = [includesValueFilter, customFilter];\n\n  return \u003cDatalistInput label=\"Select ice cream flavor\" items={items} filters={filters} /\u003e;\n};\n```\n\n### Fine-grained Control Vol. 1 - Select\n\nSince all props of the input element are exposed, you can easily customize DatalistInput to act as an Select component.\n\nJust set the input field to readonly, adjust the filter to always show all options, and set the selected item as the new value of the input field:\n\n```tsx\nimport { DatalistInput, useComboboxControls } from 'react-datalist-input';\nconst items = [\n  { id: 'Chocolate', value: 'Chocolate' },\n  { id: 'Coconut', value: 'Coconut' },\n  { id: 'Mint', value: 'Mint' },\n  { id: 'Strawberry', value: 'Strawberry' },\n  { id: 'Vanilla', value: 'Vanilla' },\n];\nfunction YourComponent() {\n  // The useComboboxControls hook provides useful states so you don't have to define them yourself.\n  const { value, setValue } = useComboboxControls({ initialValue: 'Chocolate' }); // Same as: const [value, setValue] = useState(\"Chocolate\");\n  return (\n    \u003cDatalistInput\n      value={value}\n      onSelect={(item) =\u003e setValue(item.value)}\n      label=\"Select ice cream flavor\"\n      items={items}\n      filters={[(items) =\u003e items]}\n      inputProps={{\n        title: 'Please select an ice cream flavor',\n        required: true,\n        pattern: `^(${items.map((i) =\u003e i.value).join('|')})$`,\n        readOnly: true,\n      }}\n    /\u003e\n  );\n}\n```\n\n### Fine-grained Control Vol. 2 - Multi-Select\n\nUse the `useComboboxControls` hook to get fine-grained control over the input value and the dropdown expansion states or just manage the value and expanded state yourself!\n\nIn this example, we utilize DatalistInput to act as a multi-select control:\n\n```jsx\nimport { DatalistInput, useComboboxControls, startsWithValueFilter } from 'react-datalist-input';\n\nconst YourComponent = () =\u003e {\n  // useComboboxControls returns state and handlers for the input value and the dropdown expansion state\n  const { isExpanded, setIsExpanded, setValue, value } = useComboboxControls({ isExpanded: true });\n  const [selectedItems, setSelectedItems] = useState\u003cItem[]\u003e([]);\n\n  useEffect(() =\u003e {\n    // Abitrary logic: Close select after 3 selections\n    if (selectedItems.length === 3) {\n      setIsExpanded(false);\n    }\n  }, [selectedItems]);\n\n  // Custom filter: Filter displayed items based on previous selections\n  const customFilter: Filter = useCallback(\n    (options, value) =\u003e {\n      return options.filter((o) =\u003e !selectedItems.find((s) =\u003e s.id === o.id));\n    },\n    [selectedItems],\n  );\n\n  return (\n    \u003cDatalistInput\n      isExpanded={isExpanded}\n      setIsExpanded={setIsExpanded}\n      value={value}\n      setValue={setValue}\n      onSelect={(item) =\u003e {\n        if (selectedItems.length \u003e= 3) setSelectedItems([item]);\n        else setSelectedItems((prevItems) =\u003e [...prevItems, item]); // Add the selected item to the list of selected items\n        setValue(''); // Clear the input value after selection\n        setIsExpanded(true); // Keep dropdown open after selection\n      }}\n      label=\"Select ice cream flavor\"\n      items={items}\n      filters={[customFilter, startsWithValueFilter]}\n    /\u003e\n  );\n};\n```\n\n## Properties\n\nDatalistInput accepts the following properties:\n\n### Required Properties\n\n- `items`: An array of objects of type `Item` with the following properties:\n  - id: Required. The unique identifier for the option.\n  - value: Required. The value of the option.\n  - label: Optional. The label of the option.\n  - node: Optional. A React node to display the option.\n  - ...: Any other properties you want to pass along to your onSelect callback.\n- `label`: The label of the input. Can be of type ReactNode or string.\n- `showLabel`: Whether to show the label. If not provided, defaults to true. If false, the label will not be shown but the label property must be of type string and will be supplied to the `aria-label` attribute.\n\n### Optional Properties\n\n- `placeholder`: The placeholder of the input.\n- `value`: The value of the input.\n- `setValue`: A function to set the value of the input.\n- `isExpanded`: Whether the dropdown is expanded.\n- `setIsExpanded`: A function to set the expanded state of the dropdown.\n- `onSelect`: A callback function that is called when the user selects an option.\n- `filters`: An array of filters of type `Filter` that are applied to the list of options displayed in the dropdown menu.\n- `selectedItem`: The currently selected item. Important for ARIA. DatalistInput keeps track of the last selected item. You only need to provide this prop if you want to change the selected item outside of the component.\n- `inputProps`: An object of props to pass to the combobox input element.\n- `listboxProps`: An object of props to pass to the listbox element.\n- `labelProps`: An object of props to pass to the label element.\n- `listboxOptionProps`: An object of props to pass to the listbox option elements.\n- `highlightProps`: An object of props to style the highlighted text.\n- `isExpandedClassName`: The class name applied to the listbox element if it is expanded.\n- `isCollapsedClassName`: The class name applied to the listbox element if it is collapsed.\n- `isExpandedStyle`: The inline style applied to the listbox element if it is expanded.\n- `isCollapsedStyle`: The inline style applied to the listbox element if it is collapsed.\n- `className`: The class name applied to the container element.\n- ...: Any other properties you want to pass along to the container div element.\n\n## Utilities\n\nThe following utilities are exported together with the DatalistInput component:\n\n### Utilities used together with DatalistInput\n\n- `includesValueFilter`: The default filter that filters the list of options based on the value of the input. This filter follows the behavior of the datalist HTML element.\n- `startsWithValueFilter`: An alternative filter that filters based on the start of the option's value.\n- `useComboboxControls`: A hook to get the state and handlers for the input value and the dropdown expansion state.\n\n### Utilities to implement a custom DatalistInput component\n\n- `useComboboxHelpers`: A low-level hook, which returns a set of callbacks and event handlers for the DatalistInput component.\n- `useFilters`: A hook that applies an array of filters to an array of items based on the current value.\n- `useComboboxContext`: A low-level hook that returns the Combobox context value.\n- `Combobox`: A low-level component which is wrapped by DatalistInput. It also acts as the Combobox ContextProvider.\n- `Combobox.ComboboxInput`: A low-level component that provides the input field. It has to be wrapped by the Combobox component.\n- `Combobox.Listbox`: A low-level component that provides the listbox. It has to be wrapped by the Combobox component.\n- `Combobox.ListboxOption`: A low-level component that provides one listbox option. It has to be wrapped by the Combobox component.\n- `Combobox.Highlight`: A low-level component that provides highlighting of the listbox option values based on the current input value. It has to be wrapped by the Combobox component.\n\n## Types\n\nThe following types are exported from react-datalist-input and available for use in your components:\n\n- `Filter`: A filter which can be added to the filters property of the DatalistInput component.\n- `Item`: An item that can be added to the items property of the DatalistInput component.\n- `DatalistInputProps`: The props accepted by the DatalistInput component.\n- `ComboboxProps`: The props accepted by the low-level Combobox component.\n- `ComboboxInputProps`: The props accepted by the low-level ComboboxInput component.\n- `ListboxProps`: The props accepted by the low-level Listbox component.\n- `ListboxOptionProps`: The props accepted by the low-level ListboxOption component.\n- `HighlightProps`: The props accepted by the low-level Highlight component.\n- `UseComboboxHelpersConfigParams`: The params for the low-level `useComboboxHelpers` hook.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrelandgraf%2Freact-datalist-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrelandgraf%2Freact-datalist-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrelandgraf%2Freact-datalist-input/lists"}