react-highlight-words
A component that can highlight words in the text with custom styles. It is a lightweight wrapper based on react-text-matcher.
If you want more customization capabilities, please use react-text-matcher.
Install
npm install @shhhplus/react-highlight-words --saveUsage
Single word
import Highlightwords from '@shhhplus/react-highlight-words';
const Demo = () => {
return (
<Highlightwords words="nice" style={{ color: 'green' }}>
The weather is nice today.
</Highlightwords>
);
};Multi words
import Highlightwords from '@shhhplus/react-highlight-words';
const Demo = () => {
return (
<Highlightwords
words={['weather', new RegExp('nice')]}
style={{ color: 'green' }}
>
The weather is nice today.
</Highlightwords>
);
};Use global style
import Highlightwords from '@shhhplus/react-highlight-words';
HighlightWords.config({ color: 'green' });
const Demo = () => {
return (
<>
<Highlightwords words="birthday">
Welcome to come my birthday party.
</Highlightwords>
<Highlightwords words="nice">
The weather is so nice today.
</Highlightwords>
</>
);
};