{"id":21526544,"url":"https://github.com/dev-javascript/react-custom-search-list","last_synced_at":"2026-02-22T09:35:00.366Z","repository":{"id":263346828,"uuid":"890092222","full_name":"dev-javascript/react-custom-search-list","owner":"dev-javascript","description":"A customizable React search input component with dynamic popup suggestions, allowing developers to create unique search experiences","archived":false,"fork":false,"pushed_at":"2025-01-14T13:36:16.000Z","size":2060,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-30T12:58:25.660Z","etag":null,"topics":["autocomplete","custom-autocomplete","custom-search","custom-suggestions","customizable","dynamic-suggestions","frontend","interactive-search","popup-suggestions","react","react-component","react-responsive-search","react-search","react-searchbox","responsive","search","search-input","suggestions","ui-component","user-experience"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/dev-javascript.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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,"zenodo":null}},"created_at":"2024-11-18T01:01:53.000Z","updated_at":"2025-01-14T13:35:37.000Z","dependencies_parsed_at":"2025-01-14T14:34:51.017Z","dependency_job_id":"dfc50675-808a-41f4-904a-f2c4a70c60b6","html_url":"https://github.com/dev-javascript/react-custom-search-list","commit_stats":null,"previous_names":["dev-javascript/react-custom-search-list"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/dev-javascript/react-custom-search-list","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-javascript%2Freact-custom-search-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-javascript%2Freact-custom-search-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-javascript%2Freact-custom-search-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-javascript%2Freact-custom-search-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dev-javascript","download_url":"https://codeload.github.com/dev-javascript/react-custom-search-list/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-javascript%2Freact-custom-search-list/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262113226,"owners_count":23260983,"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","custom-autocomplete","custom-search","custom-suggestions","customizable","dynamic-suggestions","frontend","interactive-search","popup-suggestions","react","react-component","react-responsive-search","react-search","react-searchbox","responsive","search","search-input","suggestions","ui-component","user-experience"],"created_at":"2024-11-24T01:45:30.112Z","updated_at":"2025-10-28T08:44:28.947Z","avatar_url":"https://github.com/dev-javascript.png","language":"JavaScript","readme":"# react-custom-search-list\n\nReact Custom Search List is a powerful and flexible search input component for React. It allows developers to create a fully customizable suggestions list that can display regardless of the current input. The component enhances user experience by providing instant visual feedback through dynamic popups, enabling users to seamlessly type and select from tailored search suggestions.\n\nWhether you want to showcase a constant list of options or dynamically adapt to user inputs, React Custom Search List offers the versatility you need to deliver an engaging search experience.\n\n## Demo\n\n- [Online Demo](https://dev-javascript.github.io/react-custom-search-list/)\n\n## Features\n\n- Custom suggestions list\n\n- Responsive\n\n- Multi Themes\n\n- Clear button\n\n- Rtl support\n\n- Flexible style\n\n- Lightweight\n\n- autoFocus\n\n## Installation\n\n\u003e $ npm install react-custom-search-list @popperjs/core --save\n\nor\n\n\u003e $ yarn add react-custom-search-list @popperjs/core\n\nIf you need to directly include script in your html, use the following links :\n\n```js\n\u003cscript src=\"https://unpkg.com/react-custom-search-list@latest/dist/react-custom-search-list.umd.min.js\"\u003e\u003c/script\u003e\n```\n\n#### NOTE:\n\n\u003e Please note that `@popperjs/core` is peer dependency, meaning you should ensure it is installed before installing `react-custom-search-list`.\n\n## Minimal Usage\n\n```js\nimport {useState} from 'react';\nimport 'react-custom-search-list/style/react-custom-search-list.min.css';\nimport ReactCustomSearchList from 'react-custom-search-list';\nfunction App() {\n  const [value, setValue] = useState('');\n  return (\n    \u003cReactCustomSearchList\n      fullWidth\n      value={value}\n      onChange={(e) =\u003e setValue(e.target.value)}\n      onClear={() =\u003e setValue('')}\u003e\n      {/**Render your suggestions list here*/}\n      \u003cul\u003e\n        \u003cli\u003eOption A\u003c/li\u003e\n        \u003cli\u003eOption B\u003c/li\u003e\n        \u003cli\u003eOption C\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/ReactCustomSearchList\u003e\n  );\n}\n```\n\n## Props\n\n- **value**\n  - type : `String`\n  - description : input value\n- **onChange**\n  - type : `Func`\n  - description : onChange Handler for the input value\n- **onClear?**\n  - type : `Func`\n  - description : triggered when the user clicks on the Clear icon\n- **theme?**\n  - type : `\"outline\"|\"underline\"|\"panel\"`\n  - description : searchbox theme\n  - default : `\"outline\"`\n- **autoFocus?**\n  - type : `Boolean`\n  - default : `Fasle`\n- **children**\n  - type : `ReactNode`\n  - description : suggestions list\n- **openOnClick?**\n  - type :`Boolean`\n  - description : if it is true then the suggestion list will be open when the user clicks on the input\n  - default : `True`\n- **openOnKeyDown?**\n  - type : `(e) =\u003e Boolean`\n  - description : if it returns true then the suggestion list will be open\n  - default : `(e) =\u003e e.key === \"Enter\"`\n- **rootStyle?**\n  - type : `Object`\n  - description : style object of the `root` element\n- **inputContainerStyle?**\n  - type: `Object`\n  - description : style object of the parent element of text input\n- **inputStyle?**\n  - type : `Object`\n  - description : style object of the `input` element\n- **placeholder?**\n  - type : `String`\n  - default : `\"search\"`\n- **popperStyle?**\n  - type : `Object`\n  - description : style object of the popper container\n- **onKeyDown?**\n  - type : `Func`\n  - description : keydown event for input\n- **onFocus?**\n  - type : `Func`\n  - description : focus event for input\n- **onBlur?**\n  - type : `Func`\n  - description : blur event for input\n- **fullWidth?**\n  - type : `Boolean`\n  - description : set popper width same as input ( if the `theme` option is equal to `\"panel\"` then `fullWidth` option will not work )\n  - default: `true`\n- **placement?**\n  - type : `'auto'| 'auto-start'| 'auto-end'| 'top'| 'top-start'| 'top-end'| 'bottom'| 'bottom-start'| 'bottom-end'| 'right'| 'right-start'| 'right-end'| 'left'| 'left-start'| 'left-end'`\n  - description : popper's placement\n  - default : `bottom-start`\n- **ClearIconComponent?**\n  - type : `React function component`\n  - description : custom Clear icon\n- **MagnifierIconComponent?**\n  - type : `React function component`\n  - description : custom Magnifier icon\n- **inputName?**\n  - type : `String`\n  - description : name attribute for the input element\n  - default : `\"\"`\n- **corner?**\n  - type : `Boolean`\n  - description : if it is true then the search box gets border-radius\n  - default : `True`\n\n## Test\n\n\u003e $ npm run test\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-javascript%2Freact-custom-search-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdev-javascript%2Freact-custom-search-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-javascript%2Freact-custom-search-list/lists"}