{/* Danger item */} Delete ) } export default CompleteMenuExample ``` -------------------------------- ### Render Bloom Menu Content in a Portal (React) Source: https://context7.com/joshpuckett/bloom/llms.txt Illustrates the use of Menu.Portal from 'bloom-menu' to render menu content in a React portal, bypassing DOM hierarchy constraints. This is useful for avoiding clipping issues caused by overflow:hidden or z-index stacking contexts. It supports rendering to the document body or a custom DOM element. ```tsx import { Menu } from 'bloom-menu' import { useRef } from 'react' function PortalExample() { const customContainer = useRef(null) return ( <> {/* Custom portal target */}

{/* Portal to document.body (default) */} Open {}}> Escapes overflow:hidden parent

{/* Portal to custom container */} Custom Target {}}> Renders in #menu-portal-root ) } ``` -------------------------------- ### Listen for Escape Key Presses with useEscapeKey Hook (React) Source: https://context7.com/joshpuckett/bloom/llms.txt The useEscapeKey hook listens for the Escape key press event and triggers a callback function when detected. This is particularly useful for closing modal dialogs, popups, or navigation menus with a keyboard shortcut. The hook can be conditionally activated based on a boolean state. ```tsx import { useEscapeKey } from 'bloom-menu' import { useState } from 'react' function EscapeKeyExample() { const [isModalOpen, setIsModalOpen] = useState(false) // Close modal on Escape press (only when modal is open) useEscapeKey( () => setIsModalOpen(false), isModalOpen ) return (

{isModalOpen && (

Press Escape to close

)}

) } ``` -------------------------------- ### Detect Reduced Motion Preference with useReducedMotion Hook (React) Source: https://context7.com/joshpuckett/bloom/llms.txt The useReducedMotion hook detects the user's `prefers-reduced-motion` system preference. It returns a boolean value, `true` when reduced motion is preferred by the user, allowing developers to implement accessible animation fallbacks. This hook is crucial for creating inclusive web experiences. ```tsx import { useReducedMotion } from 'bloom-menu' import { motion } from 'framer-motion' function AccessibleAnimation() { const prefersReducedMotion = useReducedMotion() return ( {prefersReducedMotion ? 'Instant appearance (reduced motion)' : 'Animated entrance' } ) } ``` -------------------------------- ### Implement Controlled/Uncontrolled Components with useControllable Hook (React) Source: https://context7.com/joshpuckett/bloom/llms.txt The useControllable hook facilitates the implementation of controlled and uncontrolled component patterns in React. It manages state synchronization and provides warnings when switching between these modes. This hook is useful for form elements and custom input components. ```tsx import { useControllable } from 'bloom-menu' // Custom dropdown using the controllable pattern function CustomDropdown({ value, onChange, defaultValue = '' }: { value?: string onChange?: (value: string) => void defaultValue?: string }) { const [selectedValue, setSelectedValue] = useControllable({ value, defaultValue, onChange, }) return ( ) } // Uncontrolled usage function UncontrolledExample() { return } // Controlled usage function ControlledExample() { const [value, setValue] = useState('option2') return } ``` -------------------------------- ### Detect Clicks Outside Elements with useClickOutside Hook (React) Source: https://context7.com/joshpuckett/bloom/llms.txt The useClickOutside hook detects clicks that occur outside of specified elements and triggers a provided callback function. It is commonly used for closing menus or dropdowns when a user clicks elsewhere on the page. The hook accepts an array of refs to the elements to monitor and an optional condition to control its activation. ```tsx import { useClickOutside } from 'bloom-menu' import { useRef, useState } from 'react' function ClickOutsideExample() { const [isOpen, setIsOpen] = useState(false) const panelRef = useRef(null) const buttonRef = useRef(null) // Close panel when clicking outside both the panel and button useClickOutside( [panelRef, buttonRef], () => setIsOpen(false), isOpen // Only active when panel is open ) return (

{isOpen && (

Click outside to close

)}

) } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.