Highlight text anywhere on the page to reveal the context menu.
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 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>
);
};
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>
);
};
The popover should also work inside of Input and TextArea components, but has limited support for the X,Y due to browser constraints.