Package Exports

react-rangy-highlighter
react-rangy-highlighter/dist/index.es.js
react-rangy-highlighter/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-rangy-highlighter) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Rangy Highlighter

Web annotation tool that allows users to apply highlights on the selected text and add annotations.

Peer Dependencies

react-rangy-highlighter relize on two dependencies. It utilizes the rangy/core which is a cross browser Javascript library that helps with processing user text selection. It also takes advantage of react-redux for updating anntotations across components seemlessly.

NOTE: You need to have both rangy and react-redux installed to be able to use this library.

npm install rangy rangy-serializer @types/rangy

npm install @reduxjs/toolkit@next react-redux

Installation

npm install react-rangy-highlighter --save

Usage

import Highlighter from "react-rangy-highlighter";

function App() {
  return (
    <div className="App">
        <Highlighter annotator />
    </div>
  );
}

export default App;

Props

annotator: Defaults to false. Allows the user to make annotations on the web
localStorage: Defaults to false. Allows the user to save their highlights and annotations in localStorage