Skip to main content
The EngageFabric React library provides pre-built, customizable components for common gamification UI patterns.

​
Installation

The EngageFabric React components are currently available for enterprise customers and early access partners. Contact us at support@engagefabric.cloud to get access.
Once you have access, install via npm: 
npm install @engagefabric/sdk @engagefabric/react

​
Setup

Wrap your app with the EngageFabric provider: 
import { EngageFabricProvider } from '@engagefabric/react';

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

​
Components

​
PlayerHeader

Display player’s level, XP, and currencies: 
import { PlayerHeader } from '@engagefabric/react';

function Profile() {
  return (
    <PlayerHeader
      playerId="player-123"
      showLevel={true}
      showXP={true}
      showCurrencies={['coins', 'gems']}
    />
  );
}
Props:
PropTypeDefaultDescription
playerIdstringrequiredPlayer ID to display
showLevelbooleantrueShow level badge
showXPbooleantrueShow XP progress bar
showCurrenciesstring[][]Currency IDs to display
classNamestring-Additional CSS classes

​
QuestList

Display a list of quests with progress: 
import { QuestList } from '@engagefabric/react';

function Quests() {
  return (
    <QuestList
      playerId="player-123"
      filter="active" // 'all' | 'active' | 'completed'
      onQuestClick={(quest) => console.log('Clicked:', quest)}
    />
  );
}
Props:
PropTypeDefaultDescription
playerIdstringrequiredPlayer ID
filterstring'active'Filter quests
onQuestClickfunction-Click handler
emptyMessagestring-Message when no quests

​
AdventureOverview

Display adventure/season information: 
import { AdventureOverview } from '@engagefabric/react';

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

​
Leaderboard

Display rankings: 
import { Leaderboard } from '@engagefabric/react';

function Rankings() {
  return (
    <Leaderboard
      leaderboardId="weekly-xp"
      limit={10}
      highlightPlayerId="player-123"
      showRankChange={true}
    />
  );
}
Props:
PropTypeDefaultDescription
leaderboardIdstringrequiredLeaderboard ID
limitnumber10Number of entries
highlightPlayerIdstring-Highlight this player
showRankChangebooleanfalseShow rank changes

​
Lobby

Multiplayer lobby component: 
import { Lobby } from '@engagefabric/react';

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

​
Chat

Real-time chat component: 
import { Chat } from '@engagefabric/react';

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

​
Hooks

​
usePlayer

import { usePlayer } from '@engagefabric/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>
  );
}

​
useQuests

import { useQuests } from '@engagefabric/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>
  );
}

​
useLeaderboard

import { useLeaderboard } from '@engagefabric/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>
  );
}

​
useRealtime

import { useRealtime } from '@engagefabric/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>;
}

​
Theming

Customize component styles: 
import { EngageFabricProvider, createTheme } from '@engagefabric/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>
  );
}

​
CSS Variables

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