> For AI agents: the complete documentation index is available at /react-native-arrangement-view/llms.txt, the full documentation bundle is available at /react-native-arrangement-view/llms-full.txt.

# useHingeChange

A hook to consume the hinge state changes. Call the hook inside a [`HingeObserver`](/react-native-arrangement-view/api/hinge-observer.md) or an [`ArrangementView`](/react-native-arrangement-view/api/arrangement-view.md). It observes whichever of the two is nearer.

The hook returns the current [`HingeState`](/react-native-arrangement-view/api/use-hinge-change.md#hingestate), and subscribes the component to updates. It invokes the callback with the initial unavailable state and then changed values.

The component renders again at every angle the hinge reports. For more granular updates and better performance, use [`useHingeSelector`](/react-native-arrangement-view/api/use-hinge-selector.md).

```tsx
import { Text } from 'react-native';
import { useHingeChange } from 'react-native-arrangement-view';

function Player() {
  const hinge = useHingeChange();

  return (
    <Text>{hinge.angle === null ? 'No hinge' : `${hinge.angle} rad`}</Text>
  );
}
```

## HingeState

```ts
type HingeState = {
  available: boolean;
  angle: number | null; // radians
  status: 'unknown' | 'closed' | 'partiallyOpen' | 'fullyOpen';
};
```

Before the first native update, without hardware, or when observation is disabled, the state is `{ available: false, angle: null, status: 'unknown' }`.