react-annotate-text

A custom react component for annotating text content inside HTML

Demo

Installation

npm install react-annotate-text

Feel free to replace with yarn counterparts.

Usage

import ReactAnnoteText from "react-annotate-text";

<ReactAnnotateText
  srcDoc={htmlContent}
  src={htmlURL}
  iframeTitle={"Demo"}
  height={600}
  width={500}
  highlightData={highlightData}
  selectionPopup={position => (
    <button onClick={() => addHighlightClick(position)}>Add Highlight</button>
  )}
  hoverPopup={id => (
    <button onClick={() => removeHighlightClick(id)}>Remove Highlight</button>
  )}
/>

See example directory for complete code.

Contributing

1. Install dependencies

npm install

2. Start development server

npm start