React SDK

Build powerful React applications with the CoderspaE React SDK. Integrate coding battles, leaderboards, and real-time features seamlessly.

Installation

npm install @coderspae/react

yarn add @coderspae/react

Quick Start

Wrap your application with the CoderspaE provider and start using components:

import { CoderspaEProvider, BattleArena, Leaderboard } from '@coderspae/react';

function App() {
  return (
    <CoderspaEProvider apiKey="your-api-key">
      <div className="app">
        <BattleArena mode="quick-battle" />
        <Leaderboard type="global" />
      </div>
    </CoderspaEProvider>
  );
}

Components

BattleArena

Real-time code battle component with Monaco editor integration.

<BattleArena mode="quick-battle" theme="dark" />

Leaderboard

Display rankings and user statistics.

<Leaderboard type="global" limit={50} />

ProblemList

Browse and filter coding problems.

<ProblemList difficulty="medium" category="algorithms" />

UserProfile

Display user statistics and achievements.

<UserProfile userId="user123" showStats={true} />

Hooks

useBattle

Manage battle state and real-time updates.

const { battle, joinBattle, submitCode, isLoading } = useBattle();

const handleJoin = () => {
  joinBattle({ difficulty: 'medium', language: 'javascript' });
};

useLeaderboard

Fetch and manage leaderboard data.

const { rankings, loading, refresh } = useLeaderboard('global');

useProblems

Search and filter problems with pagination.

const { problems, filters, setFilters, loadMore } = useProblems();

TypeScript Support

The React SDK is built with TypeScript and provides full type definitions:

import type { 
  BattleMode, 
  ProblemDifficulty, 
  UserRanking 
} from '@coderspae/react';

interface MyBattleProps {
  mode: BattleMode;
  difficulty: ProblemDifficulty;
  onComplete: (result: BattleResult) => void;
}

Advanced Usage

Custom Battle Component

import { useBattle, useSocket } from '@coderspae/react';

function CustomBattle() {
  const { battle, submitCode } = useBattle();
  const { connected, opponent } = useSocket();
  
  const handleSubmit = async (code: string) => {
    const result = await submitCode(code);
    if (result.success) {
      console.log('Solution accepted!');
    }
  };
  
  return (
    <div className="battle-container">
      {connected && opponent && (
        <div className="opponent-info">
          Fighting against: {opponent.username}
        </div>
      )}
      {/* Your custom battle UI */}
    </div>
  );
}

Configuration

Configure the SDK with various options:

<CoderspaEProvider
  apiKey="your-api-key"
  config={{
    apiUrl: 'https://api.coderspae.com',
    socketUrl: 'wss://ws.coderspae.com',
    theme: 'dark',
    language: 'en',
    autoConnect: true,
    debug: process.env.NODE_ENV === 'development'
  }}
>
  <App />
</CoderspaEProvider>