react-medium-highlighter

React Medium Highlighter

A lightweight, Medium-like text highlighter for React. Highlight text, add comments, and rehydrate saved annotations.

Features

• Highlight text with custom colors.
• Add comments or annotations.
• Save and rehydrate highlights.
• Easily copy selected text.

Installation

Install the library using npm or yarn:

npm install react-highlighter

Usage

import React, { useState } from "react";
import { Highlighter } from "react-highlighter";

const App = () => {
const [annotations, setAnnotations] = useState([]);

const handleCreate = (annotation) => setAnnotations([...annotations, annotation]);
const handleRemove = (annotation) => setAnnotations(annotations.filter(a => a.text !== annotation.text));

return (
<Highlighter
      createAnnotation={handleCreate}
      removeAnnotation={handleRemove}
      annotations={annotations}
    />
);
};

export default App;

Props

Name	Type	Description
createAnnotation	Function	Triggered when a highlight is created.
removeAnnotation	Function	Triggered when a highlight is removed.
annotations	Array	Pre-existing highlights.

License

This project is licensed under the MIT License.