Security News
NVD Backlog Tops 20,000 CVEs Awaiting Analysis as NIST Prepares System Updates
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
react-highlight-words
Advanced tools
The react-highlight-words package is a React component used to highlight words within a larger body of text. It is useful for search results, text highlighting, and other applications where specific words or phrases need to be visually emphasized.
Basic Highlighting
This feature allows you to highlight specific words within a text. The `searchWords` array contains the words to be highlighted, and the `textToHighlight` is the text where the words will be highlighted.
import React from 'react';
import Highlighter from 'react-highlight-words';
const text = 'This is a sample text to demonstrate highlighting.';
const searchWords = ['sample', 'highlighting'];
const App = () => (
<Highlighter
highlightClassName="YourHighlightClass"
searchWords={searchWords}
autoEscape={true}
textToHighlight={text}
/>
);
export default App;
Custom Highlighting Styles
This feature allows you to apply custom styles to the highlighted words. The `highlightStyle` prop is used to define the CSS styles for the highlighted text.
import React from 'react';
import Highlighter from 'react-highlight-words';
const text = 'This is a sample text to demonstrate custom highlighting.';
const searchWords = ['sample', 'custom'];
const App = () => (
<Highlighter
highlightStyle={{ backgroundColor: 'yellow', fontWeight: 'bold' }}
searchWords={searchWords}
autoEscape={true}
textToHighlight={text}
/>
);
export default App;
Case Insensitive Highlighting
This feature allows you to perform case insensitive highlighting. By setting the `caseSensitive` prop to `false`, the component will highlight words regardless of their case.
import React from 'react';
import Highlighter from 'react-highlight-words';
const text = 'This is a Sample text to demonstrate case insensitive highlighting.';
const searchWords = ['sample', 'highlighting'];
const App = () => (
<Highlighter
highlightClassName="YourHighlightClass"
searchWords={searchWords}
autoEscape={true}
caseSensitive={false}
textToHighlight={text}
/>
);
export default App;
The react-text-highlighter package provides similar functionality for highlighting text within a React component. It offers customizable styles and supports case insensitive highlighting. Compared to react-highlight-words, it has a simpler API but fewer customization options.
The react-string-replace package allows you to replace parts of a string with React components. It can be used to highlight text by replacing specific words with styled components. While it is more flexible in terms of what can be replaced, it requires more manual setup compared to react-highlight-words.
The react-markdown package is used to render Markdown content in React. It supports custom renderers, which can be used to highlight specific words or phrases. Although it is primarily designed for Markdown rendering, it can be adapted for text highlighting with custom renderers.
React component to highlight words within a larger body of text.
Check out a demo here.
To use it, just provide it with an array of search terms and a body of text to highlight:
<Highlighter
highlightClassName='YourHighlightClass'
searchWords={['and', 'or', 'the']}
textToHighlight="The dog is chasing the cat. Or perhaps they're just playing?"
/>
And the Highlighter
will mark all occurrences of search terms within the text:
Property | Type | Required? | Description |
---|---|---|---|
activeClassName | String | The class name to be applied to an active match. Use along with activeIndex | |
activeIndex | String | Specify the match index that should be actively highlighted. Use along with activeClassName | |
activeStyle | Object | The inline style to be applied to an active match. Use along with activeIndex | |
autoEscape | Boolean | Escape characters which are meaningful in regular expressions | |
className | String | CSS class name applied to the outer/wrapper <span> | |
caseSensitive | Boolean | Search should be case sensitive; defaults to false | |
highlightClassName | String | CSS class name applied to highlighted text | |
highlightStyle | Object | Inline styles applied to highlighted text | |
highlightTag | Node | Type of tag to wrap around highlighted matches; defaults to mark but can also be a React element (class or functional) | |
sanitize | Function | Process each search word and text to highlight before comparing (eg remove accents); signature (text: string): string | |
searchWords | Array | ✓ | Array of search words |
textToHighlight | String | ✓ | Text to highlight matches in |
unhighlightClassName | String | CSS class name applied to unhighlighted text | |
unhighlightStyle | Object | Inline styles applied to unhighlighted text |
npm i --save react-highlight-words
MIT License - fork, modify and use however you want.
FAQs
React component to highlight words within a larger body of text
The npm package react-highlight-words receives a total of 405,568 weekly downloads. As such, react-highlight-words popularity was classified as popular.
We found that react-highlight-words demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.