Skip to content

A react text selection / highlight menu similar to the context menu on medium.com.

Notifications You must be signed in to change notification settings

asyndesis/react-highlight-menu

Repository files navigation

react-highlight-menu

NPM Version Tests

A context menu that appears after highlighting or selecting text. Similar to how the menu on Medium works.

preview

Installation

Run one of the following commands:

  • npm install react-highlight-menu
  • yarn add react-highlight-menu

Then use it in your app:

import React from "react";
/* Library comes with some super basic MenuButtons: */
import { HighlightMenu, MenuButton } from "react-highlight-menu";

export default function App() {
  return (
    <div className="app">
      <HighlightMenu
        target=".app"
        allowedPlacements={["top", "bottom"]}
        menu={({ selectedText = "", setClipboard, setMenuOpen }) => (
          <>
            <MenuButton
              title="Copy to clipboard"
              icon="clipboard"
              onClick={() =>
                setClipboard(selectedText, () => {
                  alert("Copied to clipboard");
                })
              }
            />

            <MenuButton
              title="Search Google"
              onClick={() => {
                window.open(
                  `https://www.google.com/search?q=${encodeURIComponent(
                    selectedText
                  )}`
                );
              }}
              icon="magnifying-glass"
            />
            <MenuButton
              title="Close menu"
              onClick={() => setMenuOpen(false)}
              icon="x-mark"
            />
          </>
        )}
      />
    </div>
  );
}

Props

  • target - can either be a querySelector string, or a react ref.
  • styles - several css attributes can be applied for styling. (See demo)
  • menu - ({ selectedHtml, selectedText, setMenuOpen, setClipboard }) => <>Buttons</>
  • allowedPlacements - array of allowed placements -'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end'
  • offset - distance in pixels from highlighted words. 10
  • zIndex - zIndex of the popover 999999999

About

A react text selection / highlight menu similar to the context menu on medium.com.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published