@buoy-gg/浮动-工具-反应

对自定义浮动工具界面的回放钩和上下文提供者. 软件包将组件连接到状态和布局原始 @buoy-gg/floating-tools-core。它不会使完整的Buoy菜单.

安装

npm install @buoy-gg/floating-tools-react

钩子是内置的 useSyncExternalStore,在React 18中引入. 清单仍然声明 QQ17 反应; 该对等范围与执行不匹配 .

读取位置状态

此反应土著实例报告位置状态 。 您的外壳仍需要连接输入处理器并制取可拖动的表面 :

import { Text, useWindowDimensions } from "react-native";
import { useFloatingTools } from "@buoy-gg/floating-tools-react";

export function PositionReadout() {
  const screenSize = useWindowDimensions();
  const { state } = useFloatingTools({
    screenSize,
    enablePositionPersistence: false,
  });
  return <Text>{state.position.x}, {state.position.y}</Text>;
}

useFloatingTools 返回状态、初始化状态、存储和动作。 使用它的拖放和位置动作连接您的平台的事件和动画完成. 对于web,提供当前取景口的维度和DOM事件集成. 对于持久性,提供稳定的存储适配器.

其他出口包括"浮取"(FloatingTools Provider),"设置"(Sets Provider),"DevTools Provider"(DevTools Provider)等,以及它们相关的钩子. 需要的-context hooks必须在匹配提供者下运行;仅在预计缺位时使用可选变体.

请检查date=中的日期值 (帮助) 位置更改重置组件, 大小调整/方向改变更新边界 。 现成菜单和账户设置,请跟踪 快速启动。 。 。 .