React Components

npm install @engagefabricsdk/sdk @engagefabricsdk/react

import { EngageFabricProvider } from '@engagefabricsdk/react';

function App() {
  return (
    <EngageFabricProvider
      apiKey="your-api-key"
      projectId="your-project-id"
    >
      <YourApp />
    </EngageFabricProvider>
  );
}

import { PlayerHeader } from '@engagefabricsdk/react';

function Profile() {
  return (
    <PlayerHeader
      playerId="player-123"
      showLevel={true}
      showXP={true}
      showCurrencies={['coins', 'gems']}
    />
  );
}

import { QuestList } from '@engagefabricsdk/react';

function Quests() {
  return (
    <QuestList
      playerId="player-123"
      filter="active" // 'all' | 'active' | 'completed'
      onQuestClick={(quest) => console.log('Clicked:', quest)}
    />
  );
}

import { AdventureOverview } from '@engagefabricsdk/react';

function Season() {
  return (
    <AdventureOverview
      adventureId="summer-event"
      playerId="player-123"
      showProgress={true}
      showRewards={true}
    />
  );
}

import { Leaderboard } from '@engagefabricsdk/react';

function Rankings() {
  return (
    <Leaderboard
      leaderboardId="weekly-xp"
      limit={10}
      highlightPlayerId="player-123"
      showRankChange={true}
    />
  );
}

import { Lobby } from '@engagefabricsdk/react';

function GameLobby() {
  return (
    <Lobby
      lobbyId="lobby-abc"
      playerId="player-123"
      onStart={(lobby) => startGame(lobby)}
      onLeave={() => navigate('/home')}
    />
  );
}

import { Chat } from '@engagefabricsdk/react';

function LobbyChat() {
  return (
    <Chat
      channelId="lobby-abc-chat"
      playerId="player-123"
      maxMessages={100}
      showTimestamps={true}
    />
  );
}

import { usePlayer } from '@engagefabricsdk/react';

function PlayerStats() {
  const { player, loading, error, refetch } = usePlayer('player-123');

  if (loading) return <Spinner />;
  if (error) return <Error message={error.message} />;

  return (
    <div>
      <h1>{player.displayName}</h1>
      <p>Level {player.level}</p>
      <p>{player.xp} XP</p>
    </div>
  );
}

import { useQuests } from '@engagefabricsdk/react';

function QuestPage() {
  const { quests, loading } = useQuests('player-123');

  return (
    <ul>
      {quests.map(quest => (
        <li key={quest.id}>
          {quest.name}: {quest.progress}/{quest.target}
        </li>
      ))}
    </ul>
  );
}

import { useLeaderboard } from '@engagefabricsdk/react';

function Rankings() {
  const { rankings, loading } = useLeaderboard('weekly-xp', { limit: 10 });

  return (
    <ol>
      {rankings.map(entry => (
        <li key={entry.playerId}>
          {entry.displayName}: {entry.score}
        </li>
      ))}
    </ol>
  );
}

import { useRealtime } from '@engagefabricsdk/react';

function LiveUpdates() {
  const { connected } = useRealtime('player-123', {
    onXPUpdated: (data) => toast(`+${data.amount} XP!`),
    onLevelUp: (data) => showLevelUpModal(data.newLevel),
    onQuestCompleted: (data) => showReward(data.rewards)
  });

  return <div>Status: {connected ? 'Live' : 'Connecting...'}</div>;
}

import { EngageFabricProvider, createTheme } from '@engagefabricsdk/react';

const theme = createTheme({
  colors: {
    primary: '#6366F1',
    secondary: '#8B5CF6',
    success: '#10B981',
    warning: '#F59E0B',
    error: '#EF4444',
    background: '#FFFFFF',
    text: '#1F2937'
  },
  borderRadius: '8px',
  fontFamily: 'Inter, sans-serif'
});

function App() {
  return (
    <EngageFabricProvider theme={theme} ...>
      <YourApp />
    </EngageFabricProvider>
  );
}

:root {
  --ef-primary: #6366F1;
  --ef-secondary: #8B5CF6;
  --ef-border-radius: 8px;
  --ef-font-family: 'Inter', sans-serif;
}