React highlight menu demos

Highlight text anywhere on the page to reveal the context menu.

The target property

The target property supports both css-selectors and refs.

const TargetExample = () => {
  /* Using a css selector */
  return (
    <HighlightMenu
      styles={{/* ...styles */}}
      target=".highlight-menu"
      menu={()=><>Buttons go here</>}
    />
    <div ref={menuRef}>
      Selecting this text will show the menu!
    </div>
  );
};

The menu property

The menu property provides the state of the component through function arguments. A setClipboard utility function is also provided.

const MenuExample = () => {
  const menuRef = useRef();
  return (
    <HighlightMenu
      styles={{/* ...styles */}}
      target={menuRef}
      menu={({
        selectedText,
        setMenuOpen,
        setClipboard, 
      }) => 
        <Flex>
          <CopyButton
            onClick={() => setClipboard(selectedText, () => {
              alert("Copied to clipboard");
            })}
          />
          <SearchButton
            onClick={() => 
              window.open("https://www.google.com/search?q="+selectedText")}
          />
          <CloseButton
            onClick={() => setMenuOpen(false)}
          />
        </Flex>
    />
    <div ref={menuRef}>
      Selecting this text will show the menu!
    </div>
  );
};

The styles property

Change the look of the popover with several style properties. Note that buttons are not included. We are using ChakraUI behind the scenes here.

const StylesExample = () => {
  const menuRef = useRef();
  return (
    <HighlightMenu
      styles={{
        "borderColor": "black",
        "backgroundColor": "black",
        "boxShadow": "0px 5px 5px 0px rgba(0, 0, 0, 0.15)",
        "zIndex": 10,
        "borderRadius": "5px",
        "padding": "3px"
      }}
      target={menuRef}
      menu={()=><>Buttons go here</>}
    />
    <div ref={menuRef}>
      Selecting this text will show the menu!
    </div>
  );
};

Input components

The popover should also work inside of Input and TextArea components, but has limited support for the X,Y due to browser constraints.