{"id":25185919,"url":"https://github.com/abusayid693/react-search-highlight","last_synced_at":"2025-05-07T14:11:36.810Z","repository":{"id":36992839,"uuid":"503983463","full_name":"Abusayid693/react-search-highlight","owner":"Abusayid693","description":"🧜‍♂️ A light weight NPM package to highlight static search for auto completion ","archived":false,"fork":false,"pushed_at":"2024-09-07T10:25:00.000Z","size":428,"stargazers_count":5,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-07T14:11:30.573Z","etag":null,"topics":["react","react-autosuggest","suggestion-engine","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-search-highlight","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/Abusayid693.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2022-06-16T02:19:07.000Z","updated_at":"2024-10-09T10:40:39.000Z","dependencies_parsed_at":"2025-02-09T19:51:05.822Z","dependency_job_id":null,"html_url":"https://github.com/Abusayid693/react-search-highlight","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abusayid693%2Freact-search-highlight","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abusayid693%2Freact-search-highlight/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abusayid693%2Freact-search-highlight/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Abusayid693%2Freact-search-highlight/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Abusayid693","download_url":"https://codeload.github.com/Abusayid693/react-search-highlight/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252892504,"owners_count":21820648,"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":["react","react-autosuggest","suggestion-engine","typescript"],"created_at":"2025-02-09T19:40:57.464Z","updated_at":"2025-05-07T14:11:36.794Z","avatar_url":"https://github.com/Abusayid693.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-search-highlight\n\n\u003cimg src=\"https://raw.githubusercontent.com/abusayid693/react-search-highlight/main/resources/logo.svg\" width=\"50px\" height=\"50px\"\u003e\n\nreact-search-highlight is a light weight react package to highlight static/dynamic search for auto completion\n\n \u003cdiv\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/react-search-highlight\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/l/react-search-highlight\"\u003e\n  \u003cimg src=\"https://img.shields.io/github/languages/top/abusayid693/react-search-highlight\"\u003e\n\u003c/div\u003e\n\n## Installation\n\ninstall it using npm or yarn to include it in your own React project\n\nYou will also need to import css modules in root your project before using it. `dist/react-search-highlight.cjs.development.css`\n\n```bash\nnpm install react-search-highlight\n```\n\nor:\n\n```bash\nyarn add react-search-highlight\n```\n\n## Usage\n\nYou can either use the hook:\n\n```tsx static\nimport {\n  PopOverList,\n  PopOverOption,\n  PopOverOptionText,\n  Props,\n  ReactSearchHighlightProvider,\n  SearchBar,\n  STRING_MATCHING,\n  useReactSearchHighlight,\n  Wrapper\n} from 'react-search-highlight';\nimport 'react-search-highlight/dist/react-search-highlight.cjs.development.css';\n\nimport TEST_DATA from '../data.json';\n\nconst Template = () =\u003e {\n  const {suggestions, isResultsEmpty} = useReactSearchHighlight();\n  return (\n    \u003cWrapper\u003e\n      \u003cSearchBar\n        data={TEST_DATA} // need to provide data here\n        keysToSearch={['heading', 'title']} // keys to search from data object\n        placeholder=\"search docs\"\n        matchingAlgorithm={STRING_MATCHING}\n        ref={ref}\n      /\u003e\n      \u003cPopOverList\u003e\n        {suggestions?.map((item, index) =\u003e (\n          \u003cPopOverOption\n            optionIndex={index}\n            key={index}\n            onClick={() =\u003e alert(index)}\n          \u003e\n            ⚡️\n            \u003cPopOverOptionText as=\"h3\" value={item.heading} /\u003e\n            \u003cPopOverOptionText as=\"h5\" value={item.title} /\u003e\n          \u003c/PopOverOption\u003e\n        ))}\n        {isResultsEmpty \u0026\u0026 \u003ch3\u003eNo results found\u003c/h3\u003e}\n      \u003c/PopOverList\u003e\n    \u003c/Wrapper\u003e\n  );\n};\n\nexport const Custom = () =\u003e {\n  return (\n    \u003cReactSearchHighlightProvider\u003e\n      \u003cTemplate /\u003e\n    \u003c/ReactSearchHighlightProvider\u003e\n  );\n};\n```\n\nOr with the wrapper component\n\n```tsx\nimport {\n  PopOverList,\n  PopOverOption,\n  PopOverOptionText,\n  Props,\n  SearchBar,\n  Wrapper\n} from 'react-search-highlight';\nimport 'react-search-highlight/dist/react-search-highlight.cjs.development.css';\n\nimport TEST_DATA from '../data.json';\n\nexport const Default = args =\u003e {\n  return (\n    \u003cWrapper\u003e\n      {({suggestions}) =\u003e {\n        return (\n          \u003c\u003e\n            \u003cSearchBar\n              data={TEST_DATA} // need to provide data here\n              keysToSearch={['heading', 'title']} // keys to search from data object\n              placeholder=\"search docs\"\n            /\u003e\n            \u003cPopOverList\u003e\n              {suggestions?.map((item, index) =\u003e (\n                \u003cPopOverOption\n                  optionIndex={index}\n                  key={index}\n                  onClick={() =\u003e alert(index)}\n                \u003e\n                  ⚡️\n                  \u003cPopOverOptionText as=\"h3\" value={item.heading} /\u003e\n                  \u003cPopOverOptionText as=\"h5\" value={item.title} /\u003e\n                \u003c/PopOverOption\u003e\n              ))}\n            \u003c/PopOverList\u003e\n          \u003c/\u003e\n        );\n      }}\n    \u003c/Wrapper\u003e\n  );\n};\n```\n\nIf you want to use it with modal\n\n```tsx static\nimport {Modal} from 'react-search-highlight';\n\nexport const WithModal = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eModal is open\u003c/h1\u003e\n      \u003cModal\u003e\n        \u003cDefault /\u003e\n      \u003c/Modal\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n#### Data must be provided as array of object format in `\u003cSearchBar/\u003e` component `data` prop, additionally `keysToSearch` prop must be a array of keys to search form data object.\n\n```tsx\nconst data = [\n  {\n    title:....,\n    name:.....,\n    age:......,\n  },\n  ....\n]\n// It is not necessary to pass all the keys from the object, only keys that are passed\n// will be searched\nconst keysToSearch = ['title','name']\n\n\n\u003cSearchBar\n  data={data} \n  keysToSearch={keysToSearch}\n /\u003e\n\n```\n\n## 🔨 API\n`useReactSearchHighlight` can be used with `ReactSearchHighlightProvider` and it can be used throughout the component to access the context values. Note that whenever you are using it you must wrap the entire component using `ReactSearchHighlightProvider`.\n\n```tsx static\nconst {\n  suggestions,\n  isLoading,\n  input,\n  startLoading,\n  endLoading,\n  isResultsEmpty,\n  resetState\n} = useReactSearchHighlight();\n```\n\nYou can also access these values using wrapper component\n\n```tsx static\n    \u003cWrapper\u003e\n      {({suggestions, isLoading, input, startLoading, endLoading, isResultsEmpty, resetState}) =\u003e {\n        return (\n          .....\n        );\n      }}\n    \u003c/Wrapper\u003e\n```\n\n### `\u003cSearchBar/\u003e` Props:\n\n```tsx \n  // Data to perform search operation\n  data: any[];\n\n  // Determines which keys to search from the data object\n  keysToSearch?: string[];\n\n  // Determines input box behaviour it accepts three values DEBOUNCE, THROTTLE or DEFAULT\n  inputAlgorithm?: typeof DEBOUNCE | typeof THROTTLE | typeof DEFAULT;\n\n  // Optional: Determines the input algorithm timeout for debounce and throttle\n  inputAlgorithmTimeout?: number;\n\n  // Determines matching algorithm to search over data, it accepts two values CHARACTER_MATCHING or STRING_MATCHING\n  // CHARACTER_MATCHING matches each character from the data to highlight it\n  // STRING_MATCHING matches each word from the data to highlight it\n  matchingAlgorithm?: typeof CHARACTER_MATCHING | typeof STRING_MATCHING;\n\n  // Optional: input value, it is recommended not to pass any in general case\n  value?: string;\n\n  // Optional: input value onChange event handler\n  onChange?: (e:React.ChangeEvent\u003cHTMLInputElement\u003e) =\u003e void\n\n  // Optional: Determines initial input value\n  initialValue?: string\n\n  // Optional: It can be used to change search bar icon\n  PrefixIcon?: React.FC\n```\n\n### `\u003cPopOverOption/\u003e` Props:\n\n```ts\n  // React element node\n  children: ReactNode;\n  \n  // Determines the navigation index used for internal list navigation\n  optionIndex: number;\n\n```\n\n### `\u003cPopOverOptionText/\u003e` Props:\n\n```ts\n  // Determines text value to render with highlight\n  value: string;\n\n  // Determine type of html element ex: p, h1, h2\n  as: string;\n```\n\n\n### 🐛 Bug Reporting\n`The Library is in developing stage`\n- Feel free to Open an [issue on GitHub](https://github.com/Abusayid693/react-search-highlight/issues) to request any additional features you might need for your use case.\n- Connect with me on [LinkedIn](https://www.linkedin.com/in/rehan-choudhury-66842a164/). I'd love ❤️️ to hear where you are using this library.\n\n\n### 📜 License\n\nThis software is open source, licensed under the [MIT License](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabusayid693%2Freact-search-highlight","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabusayid693%2Freact-search-highlight","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabusayid693%2Freact-search-highlight/lists"}