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

Install

npm install @floating-ui/devtools

Usage

// 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 (
    <>
      <button ref={refs.setReference} {...getReferenceProps()}>
        Reference element
      </button>
      {isOpen && (
        <div
          ref={refs.setFloating}
          style={floatingStyles}
          {...getFloatingProps()}
        >
          Floating element
        </div>
      )}
    </>
  );
};

Contribution

• run pnpm --filter @floating-ui/devtools run build from root folder