useRotate

The useRotate hook provides functionality for setting the global rotation of the current layout, while maintaining the visible screen center. The hook returns an object with two properties: a setGlobalRotation function and the current globalRotation value (in degrees) from the LayoutStore.

Before using this hook, be sure to include the GlobalRotationProvider from this package.

const RotationControls = observer(() => {
    const { setGlobalRotation, globalRotation } = useRotate();

    return (
        <div>
            <div>
                <button onClick={() => setGlobalRotation(globalRotation + 45)}>Rotate Clockwise</button>
                <button onClick={() => setGlobalRotation(globalRotation - 45)}>Rotate Counterclockwise</button>
            </div>
            <div>Current Rotation: {globalRotation}</div>
        </div>
    );
});