react-highlight-colors v1.0.2

react-highlight-colors

React component that allows users to select text and highlight it in whichever color they choose. Uses juliankrispel's Selection Popover.

Installation

npm install react-highlight-colors

Usage

Importing Component

import Highlighter from 'react-hightlight-colors'

Simplest Usage

The simplest way of getting started is by just including the component with text you want to make highlightable.

<Highlighter text={yourText} />

Exporting Highlighted Text

If you wanna store the highlighted data you must pass in a callback function to the export prop.

Here is one way of using the export prop:

<Highlighter text={yourText} export={(highlightedText) => {
  this.setState({
    exportedText: highlightedText
  })
}} />

Importing Highlighted Text

Once you have exported your text and want to import it back to your Highlighter component, just set the import prop to True.

Colors

Format

In order to choose colors for the highlighter component you must pass in a list of color strings in one of the following formats:

'#FFF'
'#FFFFFF'
'rgb(255,255,255)'

Color List

Here is an example of how you can pass in a list of colors.

const chosenColors = [
 '#B80000', 
 '#DB3E00', 
 '#008B02', 
 '#FC0',
 'rgb(109,163,182)'
]

<Highlighter text={yourText} colors={chosenColors} />

This is the result of the code above.

Labeled Colors

You can add labels to your colors, by modifying the list of colors and adding the label after each color in its own list.

Here is an example of a color list with labels:

const labeledColors = [
  ['#B80000', 'Label 1'], 
  ['#DB3E00',  'Label 2'],
  ['#008B02'  'Label 3'],
  ['#FC0', 'Label 4'],
  ['rgb(109,163,182)', 'Label 5'],
]

<Highlighter text={yourText} colors={labeledColors} />

Result:

Props

License

MIT © Jonathan