https://github.com/rwu823/react-hi-text
React text highlight component
https://github.com/rwu823/react-hi-text
Last synced: 8 months ago
JSON representation
React text highlight component
- Host: GitHub
- URL: https://github.com/rwu823/react-hi-text
- Owner: rwu823
- License: mit
- Created: 2015-09-28T20:46:24.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T05:52:49.000Z (about 2 years ago)
- Last Synced: 2025-04-18T23:05:45.322Z (8 months ago)
- Language: JavaScript
- Homepage: https://rwu823.github.io/react-hi-text
- Size: 34.2 KB
- Stars: 24
- Watchers: 4
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome_frontend_development_resources - react-hi-text - React text highlight component. (React / React Components)
- awesome - react-hi-text - React text highlight component. (React / React Components)
README
# React text highlight component
[](https://travis-ci.org/rwu823/react-hi-text)
[](https://coveralls.io/github/rwu823/react-hi-text)
## Live Demo
[Demo](https://rwu823.github.io/react-hi-text)
## Installation
```sh
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
```html
```
With Module:
```js
var React = require('react')
var HiText = require('react-hi-text')
var App = React.createClass({
render(){
return (
Hello highlight text
)
}
})
React.render(, document.body)
```
output:
```html
Hello highlight text
```
## 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.
```html
JavaScript
```
expect output:
```html
JavaScript
```