https://github.com/abusayid693/react-search-highlight
🧜♂️ A light weight NPM package to highlight static search for auto completion
https://github.com/abusayid693/react-search-highlight
react react-autosuggest suggestion-engine typescript
Last synced: about 1 month ago
JSON representation
🧜♂️ A light weight NPM package to highlight static search for auto completion
- Host: GitHub
- URL: https://github.com/abusayid693/react-search-highlight
- Owner: Abusayid693
- License: mit
- Created: 2022-06-16T02:19:07.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-09-07T10:25:00.000Z (9 months ago)
- Last Synced: 2025-05-07T14:11:30.573Z (about 1 month ago)
- Topics: react, react-autosuggest, suggestion-engine, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-search-highlight
- Size: 418 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-search-highlight
react-search-highlight is a light weight react package to highlight static/dynamic search for auto completion
## Installation
install it using npm or yarn to include it in your own React project
You will also need to import css modules in root your project before using it. `dist/react-search-highlight.cjs.development.css`
```bash
npm install react-search-highlight
```
or:
```bash
yarn add react-search-highlight
```
## Usage
You can either use the hook:
```tsx static
import {
PopOverList,
PopOverOption,
PopOverOptionText,
Props,
ReactSearchHighlightProvider,
SearchBar,
STRING_MATCHING,
useReactSearchHighlight,
Wrapper
} from 'react-search-highlight';
import 'react-search-highlight/dist/react-search-highlight.cjs.development.css';
import TEST_DATA from '../data.json';
const Template = () => {
const {suggestions, isResultsEmpty} = useReactSearchHighlight();
return (
{suggestions?.map((item, index) => (
alert(index)}
>
⚡️
))}
{isResultsEmpty &&
No results found
}
);
};
export const Custom = () => {
return (
);
};
```
Or with the wrapper component
```tsx
import {
PopOverList,
PopOverOption,
PopOverOptionText,
Props,
SearchBar,
Wrapper
} from 'react-search-highlight';
import 'react-search-highlight/dist/react-search-highlight.cjs.development.css';
import TEST_DATA from '../data.json';
export const Default = args => {
return (
{({suggestions}) => {
return (
<>
{suggestions?.map((item, index) => (
alert(index)}
>
⚡️
))}
>
);
}}
);
};
```
If you want to use it with modal
```tsx static
import {Modal} from 'react-search-highlight';
export const WithModal = () => {
return (
Modal is open
);
};
```
#### Data must be provided as array of object format in `` component `data` prop, additionally `keysToSearch` prop must be a array of keys to search form data object.
```tsx
const data = [
{
title:....,
name:.....,
age:......,
},
....
]
// It is not necessary to pass all the keys from the object, only keys that are passed
// will be searched
const keysToSearch = ['title','name']
```
## 🔨 API
`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`.
```tsx static
const {
suggestions,
isLoading,
input,
startLoading,
endLoading,
isResultsEmpty,
resetState
} = useReactSearchHighlight();
```
You can also access these values using wrapper component
```tsx static
{({suggestions, isLoading, input, startLoading, endLoading, isResultsEmpty, resetState}) => {
return (
.....
);
}}
```
### `` Props:
```tsx
// Data to perform search operation
data: any[];
// Determines which keys to search from the data object
keysToSearch?: string[];
// Determines input box behaviour it accepts three values DEBOUNCE, THROTTLE or DEFAULT
inputAlgorithm?: typeof DEBOUNCE | typeof THROTTLE | typeof DEFAULT;
// Optional: Determines the input algorithm timeout for debounce and throttle
inputAlgorithmTimeout?: number;
// Determines matching algorithm to search over data, it accepts two values CHARACTER_MATCHING or STRING_MATCHING
// CHARACTER_MATCHING matches each character from the data to highlight it
// STRING_MATCHING matches each word from the data to highlight it
matchingAlgorithm?: typeof CHARACTER_MATCHING | typeof STRING_MATCHING;
// Optional: input value, it is recommended not to pass any in general case
value?: string;
// Optional: input value onChange event handler
onChange?: (e:React.ChangeEvent) => void
// Optional: Determines initial input value
initialValue?: string
// Optional: It can be used to change search bar icon
PrefixIcon?: React.FC
```
### `` Props:
```ts
// React element node
children: ReactNode;
// Determines the navigation index used for internal list navigation
optionIndex: number;
```
### `` Props:
```ts
// Determines text value to render with highlight
value: string;
// Determine type of html element ex: p, h1, h2
as: string;
```
### 🐛 Bug Reporting
`The Library is in developing stage`
- 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.
- Connect with me on [LinkedIn](https://www.linkedin.com/in/rehan-choudhury-66842a164/). I'd love ❤️️ to hear where you are using this library.
### 📜 License
This software is open source, licensed under the [MIT License](./LICENSE).