Hooks and types

useBracketCopy Anchor Link

function useBracket(): BracketContextValue

Everything about the bracket being drawn. Call it in any component inside Bracket.Root, for example to build your own navigation:

function RoundPicker() {
  const { rounds, page, setPage } = useBracket();
  return (
    <select value={page} onChange={(event) => setPage(Number(event.target.value))}>
      {rounds.map((round, index) => (
        <option key={round.id} value={index}>{round.name}</option>
      ))}
    </select>
  );
}

useBracketCellCopy Anchor Link

function useBracketCell(): LayoutCell

The match being rendered and where it sits, inside Bracket.Matches. Returns a LayoutCell.

useConnectorCopy Anchor Link

function useConnector(): ConnectorState

The line being rendered, inside Bracket.Connectors. Use it to keep a custom line in its own component. Returns a ConnectorState.

LabelsCopy Anchor Link

MotionCopy Anchor Link

RootStateCopy Anchor Link

RoundStateCopy Anchor Link

MatchStateCopy Anchor Link

ParticipantStateCopy Anchor Link

ConnectorStateCopy Anchor Link

ColumnCopy Anchor Link

ClassNamesCopy Anchor Link

A class for any part, by name:

type ClassNames = Partial<Record<Part, string>>;

Part is one of root, group-title, viewport, content, round, round-title, matches, cell, match, participant, participant-name, participant-score, connectors, connector, pagination, page, page-previous, page-next, zoom-controls, zoom-in, zoom-out and zoom-reset. See Parts and data attributes for what each one is.