@buoy-gg/floating-tools-react

React hooks and context providers for a custom floating-tool interface. The package connects components to the state and layout primitives in @buoy-gg/floating-tools-core. It does not render the complete Buoy menu.

Install

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

The hooks use React's built-in useSyncExternalStore, introduced in React 18. The manifest still declares React >=17; that peer range does not match the implementation.

Read position state

This React Native example reports position state. Your shell still needs to connect input handlers and render the draggable surface:

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 returns state, initialization status, the store, and actions. Use its drag and position actions to connect your platform's events and animation completion. For web, supply the current viewport dimensions and a DOM event integration. For persistence, supply a stable storage adapter.

Other exports include FloatingToolsProvider, SettingsProvider, DevToolsProvider, and their related hooks. Required-context hooks must run under the matching provider; use the optional variants only where absence is expected.

Check that position changes rerender the component and that resize/orientation changes update boundaries. For the ready-made menu and account setup, follow the Buoy Quick Start.