The future of Popper is here! Floating UI is now available. Get it now!
Popper Logo
Popper Logo
  • Home

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:

Don't mind tech-related ads? Consider disabling your ad-blocker to help us!
They are small and unobtrusive.
Alternatively, support us on Open Collective!


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} />


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.

Edit this page
© 2024 MIT License