multiple-groups-highlight
v1.1.3
Published
Support for multi-group word highlighting
Downloads
27
Maintainers
Readme
multiple-groups-highlight
A react highlight component, support multiple groups words.
Usage
yarn add multiple-groups-highlight
Or
npm i multiple-groups-highlight
Example
You need to add css for 'red' and 'pink'.
import React from 'react'
import Highlighter from 'multiple-groups-highlight'
import './custom-style.scss'
const App = () => {
return (
<Highlighter
textToHighlight={`In order to gain the TypeScript typings (for intellisense / autocomplete) while using CommonJS imports with require() use the following`}
words={[['CommonJS', 'Script'], ['TypeScript', 'complete']]}
activeClasses={['red', 'pink']}
/>
)
}
ReactDom.render(
<App />,
document.getElementById('root')
)
Create css file custom-style.scss
.pink {
color: pink;
}
.red {
background: red;
}
Props
component props.
export interface HighlighterProps {
textToHighlight: string,
activeClasses: Array<string>
words: Array<Array<string> | string>
caseSensitive?: boolean
autoEscape?: boolean
isRichText?: boolean
}