Open an accordion and 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=".target-example"
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 = () => {
return (
<HighlightMenu
styles={{/* ...styles */}}
target=".menu-example"
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>
}
/>
);
};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 = () => {
return (
<HighlightMenu
styles={{
"borderColor": "#D53F8C",
"backgroundColor": "#D53F8C",
"boxShadow": "0px 5px 5px 0px rgba(0, 0, 0, 0.15)",
"zIndex": 10,
"borderRadius": "5px",
"padding": "3px"
}}
target=".styles-example"
menu={()=><>Buttons go here</>}
/>
);
};This example uses the built-in MenuButton component with custom classNames. But you can use normal talwind buttons if you prefer that. The withoutStyles can be set to true if the native styles are interfering with your custom classes.
import { HighlightMenu, MenuButton } from "react-highlight-menu";
const TailwindStyleExample = () => {
return (
<div className="tailwind-menu-example">
<HighlightMenu
classNames={{
menu: "flex gap-1 p-1",
popover: "bg-white shadow-lg rounded-md border border-gray-200",
arrow: "fill-white",
}}
target=".tailwind-menu-example"
withoutStyles={true}
menu={({ selectedText = "", setClipboard, setMenuOpen }) => (
<>
<MenuButton
className="p-2 rounded-md hover:bg-gray-100 text-gray-700"
title="Copy to clipboard"
icon="clipboard"
onClick={() =>
setClipboard(selectedText, () => {
alert("Copied to clipboard");
})
}
/>
<MenuButton
className="p-2 rounded-md hover:bg-gray-100 text-gray-700"
title="Search Google"
onClick={() => {
window.open(
`https://www.google.com/search?q=${encodeURIComponent(
selectedText
)}`
);
}}
icon="magnifying-glass"
/>
<MenuButton
className="p-2 rounded-md hover:bg-gray-100 text-gray-700"
title="Close menu"
onClick={() => setMenuOpen(false)}
icon="x-mark"
/>
</>
)}
allowedPlacements={["top", "bottom"]}
/>
</div>
);
};The popover should also work inside of Input and TextArea components, but has limited support for the X,Y due to browser constraints.
const InputExample = () => {
return (
<>
<Input defaultValue="Highlight my value" />
<Textarea defaultValue="Highlight my text" />
</>
);
};