# Hooks and types

Source: https://react-brackets.oulabi.dev/docs/native/hooks-and-types

The hooks for your own parts, the zoom and swipe options, labels, and the types around them.

Everything here is exported from `@react-brackets/native`. The data types, like `Stage`, `Match` and `Participant`, come from the core and are the same as on the web: see [Data model](/docs/api/data-model).

## `usePagination()`

Paging for your own round tabs, dots or buttons. Works anywhere inside `Bracket.Root`. `position` is a Reanimated shared value that moves under the finger during a swipe, so an indicator built from it in `useAnimatedStyle` moves on the UI thread. See [Navigation and zoom](/docs/native/navigation-and-zoom#round-tabs).

```tsx
const { paged, rounds, page, setPage, previous, next, canPrevious, canNext, position } =
  usePagination();
```

`paged` is `true` while the bracket shows one round at a time, and `false` while it shows the whole tree, so controls placed outside the viewport can hide themselves on a wide screen:

```tsx
function RoundDots() {
  const { paged, rounds, page, setPage } = usePagination();
  if (!paged) return null;
  return rounds.map((round, index) => (
    <Pressable key={round.id} onPress={() => setPage(index)}>
      <Text>{index === page ? '●' : '○'}</Text>
    </Pressable>
  ));
}
```

(Every field of `PaginationState`, with its type and default, is in the API reference.)

## `useZoom()`

Pan and zoom for your own zoom buttons, anywhere inside `Bracket.Root`. Returns `null` while the tree isn't panned and zoomed: in the paged view, or in `scroll` and `fit` modes.

```tsx
const zoom = useZoom();
if (!zoom) return null;
zoom.zoomTo(zoom.maxScale);
```

(Every field of `ZoomState`, with its type and default, is in the API reference.)

## `useConnector()`

The line being drawn, inside `renderConnector`: its matches, whether it is highlighted, and `points`, a shared value with where it starts and ends. Use it in a component of your own that draws the line from scratch. See [Connector lines](/docs/native/connectors#drawing-lines-from-scratch).

```tsx
function Straight() {
  const { points } = useConnector();
  const line = useAnimatedStyle(() => {
    const { start, end, opacity } = points.value;
    // A view one point long, stretched with a transform, moves in the same frame as the cards.
    return {
      opacity,
      transform: [
        { translateX: start.x },
        { translateY: start.y },
        { rotate: `${Math.atan2(end.y - start.y, end.x - start.x)}rad` },
        { scaleX: Math.hypot(end.x - start.x, end.y - start.y) },
      ],
    };
  });
  return (
    <Animated.View
      style={[
        { position: 'absolute', width: 1, height: 2, backgroundColor: '#a1a1aa' },
        { transformOrigin: 'left center' },
        line,
      ]}
    />
  );
}
```

`connectorPath(start, end, radius)` returns the bracket's own elbow as SVG path data. It runs on the UI thread too, so it works in `useAnimatedProps`.

(Every field of `ConnectorState`, with its type and default, is in the API reference.)

(Every field of `ConnectorPoints`, with its type and default, is in the API reference.)

## `useBracket()`

The bracket's context: the stage, the group, the theme, the labels and the highlight. Use it in your own components inside a card, a round title or anything else inside the bracket.

(Every field of `BracketContextValue`, with its type and default, is in the API reference.)

## `useMatch()`

The match being drawn, inside `renderMatch`. Useful in a component of your own deep inside a card, without passing the match down.

```tsx
function Venue() {
  const match = useMatch();
  return <Text>{venues[match.id]}</Text>;
}
```

## `useBracketTheme()`

The theme a bracket would use here: the nearest `BracketThemeProvider`, or the light or dark theme from the system's appearance, with any overrides you pass applied on top. Use it to match your own views to the bracket.

```tsx
const theme = useBracketTheme();
<View style={{ backgroundColor: theme.colors.surface, borderRadius: theme.radius }} />;
```

## `ZoomOptions`

The `zoom` option on `<Bracket>` and `Bracket.Root`: how pan and zoom behaves in `pan-zoom` mode. [How it feels](/docs/native/navigation-and-zoom#zoom) shows each one in use.

(Every field of `ZoomOptions`, with its type and default, is in the API reference.)

## `SwipeOptions`

The `swipe` option: how a swipe pages in the paged view.

(Every field of `SwipeOptions`, with its type and default, is in the API reference.)

## `Labels`

Every built-in string, for translation and screen readers. Pass any of them to `labels`. See [Right to left](/docs/native/right-to-left).

(Every field of `Labels`, with its type and default, is in the API reference.)

## Other types

| Type | What it is |
| --- | --- |
| `StyleOf<State, Style>` | A style, or a function of a part's state that returns one. Every part's `style` takes it. |
| `ThemeOverrides` | Any values of `BracketTheme`, with any of its `colors`. What `theme` and `createTheme` take. |
| `TreeMode` | `'scroll' \| 'fit' \| 'pan-zoom'`: how the whole tree fits its width. |
| `BracketLayout` | `'standard' \| 'mirrored'`: one tree, or two halves that meet at the final. |
| `PageHeight` | `'contain' \| 'follow'`: how the paged view's height moves between rounds. |
| `Transform` | `{ scale, x, y }`: a zoom and a position, as `zoom.initial` takes. |