https://github.com/ydeshayes/react-highlight

ReactJS component that help you highlight ranges of text and give you callbacks to detect user selection.
https://github.com/ydeshayes/react-highlight

highlight-ranges highlight-text range reactjs reactjs-components

Last synced: about 20 hours ago
JSON representation

ReactJS component that help you highlight ranges of text and give you callbacks to detect user selection.

• Host: GitHub
• URL: https://github.com/ydeshayes/react-highlight
• Owner: ydeshayes
• License: mit
• Created: 2016-10-15T13:07:45.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2023-03-15T02:15:42.000Z (almost 3 years ago)
• Last Synced: 2025-08-25T19:21:02.067Z (5 months ago)
• Topics: highlight-ranges, highlight-text, range, reactjs, reactjs-components
• Language: JavaScript
• Homepage: https://ydeshayes.github.io/react-highlight/
• Size: 3.07 MB
• Stars: 139
• Watchers: 1
• Forks: 25
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

          
[![Build Status](https://travis-ci.org/ydeshayes/react-highlight.svg?branch=master)](https://travis-ci.org/ydeshayes/react-highlight)

# Highlight component for ReactJS

ReactJS component that help you highlight ranges of text and give you callbacks to detect user text selection.

## Installation

```

  npm install highlightable

```

## Features

* Pass ranges and the component will highlight the text for you

* Callback function that give you the start and end of the user highlited text

* Customisable renderRange function that allow you to add tooltip on the top of user selection for exemple

* Convert url string into link

## Getting started

```jsx

```

### Props:

* **ranges** -> array: of Range objects (see Range object below).

* **text** -> string: the all text that the user can highlight.

* **enabled** -> bool: The user can't highlight text if false.

* **onMouseOverHighlightedWord** -> func: Callback function when the user mouse is over an highlighted text.

`(range) => {}`

* **onTextHighlighted** -> func: Callback function when the user highlight new text.

`(range) => {}`

* **highlightStyle** -> obj: Style of the text when the text is highlighted. or func: 

`(range, charIndex) => {return style}`

* **style** -> obj: The style of the main div container

* **rangeRenderer** -> func: Use this function to customise the render of the highlighted text.

`(currentRenderedNodes, currentRenderedRange, currentRenderedIndex, onMouseOverHighlightedWord) => {return node}`

* **nodeRenderer** -> func: Use this function to customise the render of the nodes.

`(charIndex, range, text, url, isEmoji) => {return node}`

### Range object:

The range object attributes:

* **start** -> int: the index of the character where the range start.

* **end** -> int: the index of the character where the range stop.

* **text** -> string: the highlighted text.

* **data** -> object: extra data (the props of the highlight component)

## Development

* `npm run build` - produces production version

* `npm run dev` - produces development version

* `npm test` - run the tests