Floating UI Devtools

This is the platform-agnostic devtools package of Floating UI, exposing
mechanisms to be used together with
Chrome devtools extension
to help debugging Floating UI

How to use

This package exposes a middleware to
be added at the end of the middleware chain, which will inject the data to be
consumed by the devtools extension.

> ⚠️ Do not forget to remove the middleware before shipping to production

$3

``bash
npm install @floating-ui/devtools
`

$3

`js
// example with @floating-ui/react
import {devtools} from '@floating-ui/devtools';

export const Default = () => {
const [isOpen, setIsOpen] = useState(false);

const {refs, floatingStyles, context} = useFloating({
open: isOpen,
onOpenChange: setIsOpen,
// add the middleware to the end of the middleware chain if in dev mode
middleware: [import.meta.env.DEV && devtools(document)],
});

const click = useClick(context);

const {getReferenceProps, getFloatingProps} = useInteractions([click]);

return (
<>

Reference element

{isOpen && (
ref={refs.setFloating}
style={floatingStyles}
{...getFloatingProps()}
>
Floating element