1.0.1 • Published 7 months ago

react-medium-highlighter v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
7 months ago

React Medium Highlighter

React Highlighter Demo

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

NameTypeDescription
createAnnotationFunctionTriggered when a highlight is created.
removeAnnotationFunctionTriggered when a highlight is removed.
annotationsArrayPre-existing highlights.

License

This project is licensed under the MIT License.

1.0.1

7 months ago

1.0.0

7 months ago