multiple-groups-highlight v1.1.3

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
}

License

MIT