64 lines
1.6 KiB
Markdown
64 lines
1.6 KiB
Markdown
# Floating UI Devtools
|
|
|
|
This is the platform-agnostic devtools package of Floating UI, exposing
|
|
mechanisms to be used together with
|
|
[Chrome devtools extension](https://chromewebstore.google.com/detail/floating-ui-devtools/ninlhpbnkjidaokbmgebblaehpokdmgb?hl=en)
|
|
to help debugging Floating UI
|
|
|
|
## How to use
|
|
|
|
This package exposes a [middleware](https://floating-ui.com/docs/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
|
|
|
|
```bash
|
|
npm install @floating-ui/devtools
|
|
```
|
|
|
|
### Usage
|
|
|
|
```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 (
|
|
<>
|
|
<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
|