React Hook
The usePopper hook provides an API almost identical to the ones of
createPopper constructor.
Rather than returning a Popper instance, it will return an object containing the following properties:
They are small and unobtrusive.
Alternatively, support us on Open Collective!
styles
The styles property is an object, its properties are popper, and arrow.
The two properties are a
CSSStyleDeclaration interface
describing the necessary CSS properties needed to properly position the two
elements.
You can directly assign the value of the two properties to the React style
property of your components.
<div style={styles.popper} />attributes
Similar to styles, the attributes object lists the popper and arrow HTML
attributes, by default, only popper will hold some attributes (e.g.
data-popper-placement), but more generically, any HTML attribute described by
the Popper documentation will be available inside these properties.
The easiest way to consume their values is by destructuring them directly onto your React component.
<div {...attributes.popper} />update, forceUpdate, and state
These properties match the ones described in the
Popper docs, the only difference is that
they can be null if Popper isn't yet been initialized or has been destroyed.