Connect 4 — React SDK

Drop-in React components for Connect 4. All components must be rendered inside a BetaGamerProvider.

Install

npm install @beta-gamer/react

Connect4Board

The interactive 7×6 board. Renders columns as clickable drop zones. Highlights the last move and winning cells. Becomes read-only when it's not the player's turn.

Prop	Type	Default	Description
`className`	string	—	Extra CSS class on the board wrapper.

<Connect4Board className="rounded-lg shadow-xl" />

Connect4Score

Displays the current score (wins per player) across multiple rounds if you're running a series.

<Connect4Score className="text-sm" />

Full layout example

import {
  BetaGamerProvider,
  Connect4Board,
  Connect4Score,
  PlayerCard,
} from '@beta-gamer/react';

export default function Connect4Page({ sessionToken }: { sessionToken: string }) {
  return (
    <BetaGamerProvider token={sessionToken}>
      <div className="flex flex-col items-center gap-4">
        <PlayerCard player="opponent" />
        <Connect4Score />
        <Connect4Board className="w-full max-w-lg" />
        <PlayerCard player="self" />
      </div>
    </BetaGamerProvider>
  );
}

Beta Gamer GaaS API — questions? support@beta-gamer.com