https://github.com/rwu823/react-hi-text

React text highlight component
https://github.com/rwu823/react-hi-text

Last synced: about 1 month 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 9 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T05:52:49.000Z (about 1 year ago)
• Last Synced: 2024-11-06T13:49:28.065Z (about 2 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

README

        
# React text highlight component

[![Build Status](https://img.shields.io/travis/rwu823/react-hi-text.svg?branch=master)](https://travis-ci.org/rwu823/react-hi-text)

[![Coverage](https://img.shields.io/coveralls/rwu823/react-hi-text.svg?branch=master)](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

```