React-text-illuminator NPM

ReactTextIlluminator

ReactTextIlluminator is a React component designed to highlight specific text within a larger body of text. It can be useful for indicating search results, highlighting keywords, or emphasizing certain terms.

Installation

You can install the ReactTextIlluminator component

via npm:

npm i react-text-illuminator

or via yarn:

yarn add react-text-illuminator

Features

Text Highlighting
SEO Friendly
Zero dependencies: Self-contained solution, ensuring reliability and ease of deployment.
Customization of Highlight Term
Customization of Highlight Color
Support for Complex Text
Escape of Special Characters

Demo

Live:

Codesandbox Demo

ReactTextIlluminator

Props

The ReactTextIlluminator component accepts the following props:

Prop	Type	Description	Default Value
`textContent`	`string`	The text content to be displayed.	-
`highlightTerm`	`string`	The text to be highlighted within the `textContent`.	-
`highlightColor`	`string`	The background color used for highlighting.	#ffff00

Usage

To use the ReactTextIlluminator component, simply import it into your React application and include it in your JSX markup.

import React from 'react';
import ReactTextIlluminator from 'react-text-illuminator';

const App = () => {
  return (
    <div>
      <h1>Search Results</h1>
      <ReactTextIlluminator
        textContent="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        highlightTerm="Lorem"
        highlightColor="yellow"
      />
    </div>
  );
};

export default App;