Usage
import { useState } from 'react'; import { Button, Popover } from '@wordpress/components'; const MyPopover = () => { const [ isVisible, setIsVisible ] = useState( false ); const toggleVisible = () => { setIsVisible( ( state ) => ! state ); }; return ( <Button variant="secondary" onClick={ toggleVisible }> Toggle Popover! { isVisible && <Popover>Popover is toggled!</Popover> } </Button> ); };
import { useState } from 'react'; import { Button, Popover } from '@wordpress/components'; const MyPopover = () => { // Use internal state instead of a ref to make sure that the component // re-renders when the popover's anchor updates. const [ popoverAnchor, setPopoverAnchor ] = useState(); const [ isVisible, setIsVisible ] = useState( false ); const toggleVisible = () => { setIsVisible( ( state ) => ! state ); }; return ( <p ref={ setPopoverAnchor }>Popover s anchor</p> <Button variant="secondary" onClick={ toggleVisible }> Toggle Popover! </Button> { isVisible && ( <Popover anchor={ popoverAnchor } > Popover is toggled! </Popover> ) } ); };
import { createRoot } from 'react-dom/client'; import { Popover } from '@wordpress/components'; import Content from './Content'; const app = document.getElementById( 'app' ); const root = createRoot( app ); root.render( <div> <Content /> <Popover. Slot /> </div> );
Props
anchor: Element | VirtualElement | null
-
Required: No
anchorRect: DomRectWithOwnerDocument
-
Required: No
anchorRef: Element | PopoverAnchorRefReference | PopoverAnchorRefTopBottom | Range
-
Required: No
animate: boolean
-
Required: No -
Default: true
children: ReactNode
-
Required: Yes
expandOnMobile: boolean
-
Required: No
flip: boolean
-
Required: No -
Default: true
focusOnMount: ‘firstElement’ | boolean
-
Required: No -
Default: "firstElement"
onFocusOutside: ( event: SyntheticEvent ) => void
-
Required: No
getAnchorRect: ( fallbackReferenceElement: Element | null ) => DomRectWithOwnerDocument
-
Required: No
headerTitle: string
-
Required: No
isAlternate: boolean
-
Required: No
noArrow: boolean
-
Required: No -
Default: true
offset: number
-
Required: No
onClose: () => void
-
Required: No
placement: ‘top’ | ‘top-start’ | ‘top-end’ | ‘right’ | ‘right-start’ | ‘right-end’ | ‘bottom’ | ‘bottom-start’ | ‘bottom-end’ | ‘left’ | ‘left-start’ | ‘left-end’ | ‘overlay’
-
Required: No -
Default: "bottom-start"
position: [yAxis] [xAxis] [optionalCorner]
yAxis : 'top' | 'middle' | 'bottom' xAxis : 'left' | 'center' | 'right' corner : 'top' | 'right' | 'bottom' | 'left'
-
Required: No
resize: boolean
-
Required: No -
Default: true
variant: ‘toolbar’ | ‘unstyled’