rht

react-hi-text

React text highlight component

Showing:

Popularity

Downloads/wk

22

GitHub Stars

24

Maintenance

Last Commit

6yrs ago

Contributors

1

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

React text highlight component

Build Status Coverage

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>

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100