浮动 UI 演示工具

这是Floating UI 的平台-不可知的演示软件包,正在曝光 与《京都议定书》 Chrome devools 扩展名 帮助调试浮点数

如何使用

这个软件包暴露了一个 中间软件 改为 在中间软件链的结尾处添加,该链将输入数据 由devtools扩展所消耗.

不要忘记在将中间软件运入生产前移除

安装

npm install @floating-ui/devtools

使用量

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

捐款

• 运行 pnpm --filter @floating-ui/devtools run build 从根文件夹中