@jottaxwds/react-search-highlighting v1.0.2
REACT SEARCH HIGHLIGHTING
react-search-highlighting
is a React library that provides a set of components and utilities to make highlighting search terms in text content easy and customizable.
Features
Highlighting Component
The <Highlighting>
component is a flexible and powerful component that highlights text content based on a set of search terms. It accepts the following props:
termsToHighlight
: An array of search terms to highlight in the content.config
: A configuration object that allows for customization of the highlighting behavior. The config object can have the following properties:caseSensitive
: A boolean value that determines whether the search is case-sensitive or not.exactMatch
: A boolean value that determines whether the search should match exact terms or not.ignoreDiacritics
: A boolean value that determines whether the search should ignore diacritics or not.
prioritiseCtxConfig
: By default<Highlighting>
applies direct config passed to it on itsconfig
prop, however, if used inside of aHighlightingProvider
the preference of the config used can be modified. By default, the directconfig
passed as a prop to it will take preference over aconfig
passed by context.theming
: Basic & just a few style overrides. DISCLAIMER: Ensure good a11y score is met after changing this theming values.color
: font color of the highlighted content (default black)background
: To override default<mark>
background on highlighted content.fontWeight
: To override default<mark>
font weight and make it bolder/lighter.
Highlighting Provider
The <HighlightingProvider>
component is a context provider that holds the current termsToHighlight value to be updated by another component in the page, such as a search bar or input field. This allows for easy sharing of the termsToHighlight value across multiple components.
useHighlighting Hook
The useHighlighting hook is a simple and easy-to-use hook that allows for consuming the context value of the termsToHighlight and also provides a updateTermsToHighlight function to update the context value.
Getting Started
To use react-search-highlighting
, you can install it from npm:
npm install @jottaxwds/react-search-highlighting
Then, import the components and utilities you need:
import { Highlighting, HighlightingProvider, useHighlighting } from '@jottaxwds/react-search-highlighting';
And start using them in your React application!
function MyComponent() {
const { termsToHighlight, updateTermsToHighlight } = useHighlighting();
return (
<div>
<HighlightingProvider>
<input type="text" onChange={(e) => updateTermsToHighlight(e.target.value)} />
<Highlighting termsToHighlight={termsToHighlight}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Highlighting>
</HighlightingProvider>
</div>
);
}
With react-search-highlighting
, you can easily highlight search terms in your text content with a flexible and customizable set of components and utilities!
Future goals for v2.0.0:
- Use
React components
as achildren
: Sometimes it can be needed to apply highlighting over complex components that does not exposestring
to highlight. It can be the case of a<FormattedMessage>
fromreact-intl
or any other component in which we can not pass astring
as achildren
of the<Highlighting>
.