react-hi-text
v0.2.2
Published
React text highlight component
Downloads
61
Maintainers
Readme
React text highlight component
Live 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>