Headless Highlight Popover for React

A lightweight and customizable React component for displaying popovers on text selection, with zero dependencies.

Installation

Add the package using your package manager:

npm i @omsimos/react-highlight-popover

Usage

Here's a basic example of how to use the HighlightPopover component:

import { HighlightPopover, useHighlightPopover } from "@omsimos/react-highlight-popover";

function Popover() {
  const { currentSelection, setShowPopover } = useHighlightPopover();

  return (
    <div className="bg-white border rounded-md mt-2 p-2 shadow-lg select-none">
      <p>You selected: {currentSelection}</p>
      <button className="font-semibold" onClick={() => setShowPopover(false)}>
        Close
      </button>
    </div>
  );
}

export function Example() {
  return (
    <HighlightPopover renderPopover={() => <Popover />}>
      <p>
        This is a sample text. Try selecting some words to see the popover in action.
      </p>
    </HighlightPopover>
  );
}

API Reference