React Text Marker

A React Component to Dynamically Mark Words within a Body of Text.

Check Out the Demo.

Installation

npm install @devkosta/react-text-marker --save-dev

yarn add @devkosta/react-text-marker

How to Use

import React from 'react';
import { MarkedText } from '@devkosta/react-text-marker';

const Example = () => {
    return (
        <MarkedText
            textToMark='Hello, World! This is some marked text.'
            isCaseSensitive={true}
            markedWords={['Hello', 'marked text']}
            markerColor='#9AE6B4'
        />
    );
};

Props

| Property | Type | Required? | Description | |:---|:---|:---:|:---| | textToMark | String | ✓ | The text in which the words will be marked. | | isCaseSensitive | Boolean | | The markedWord are case sensitive. Defaults to false. | | markedWords | Array | ✓ | The words in which will be marked. | | markerColor | String | | The color of the marker. Defaults to #F6E05E. |

License

MIT © DevKosta