rwu823 / react-hi-text

React text highlight component

React text highlight component

Live Demo

Demo

Installation

npm install react-hi-text --save

Examples

React highlight text bundle with UMD mode, if you don't use any module loader It will exports ReactHiText as global variable.

with script tag

<script src="assets/react.js"></script>
<script src="assets/react-hi-text.js"></script>

With Module:

var React = require('react')
var HiText = require('react-hi-text')

var App  = React.createClass({
	render(){
		return (
			<div id="app">
				<HiText hi="h">
					Hello highlight text
				</HiText>
			</div>
		)
	}
})

React.render(<App/>, document.body)

output:

<div id="app">
	<span class="highlight">H</span>ello <span class="highlight">h</span>ig<span class="highlight">h</span>lig<span class="highlight">h</span>t text
</div>

Props

hi

Set highlight with a word.

case-sensitive

Match word with case sensitive. default is false.

className

set class name. default is highlight.

Method

clean()

Clear all highlights.

hasMatched

Check whether or not match any words.

Known issue

Cross tag highlight issue:

e.g.

<HiText hi="javascript">
	<b>Java</b>Script
</HiText>

expect output:

<span class="highlight"><b>Java</b>Script</span>