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.com to get access.
Once you have access, install via npm: 
npm install @engagefabricsdk/sdk @engagefabricsdk/react

​
Setup

Wrap your app with the EngageFabric provider: 
import { EngageFabricProvider } from '@engagefabricsdk/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 '@engagefabricsdk/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 '@engagefabricsdk/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 '@engagefabricsdk/react';

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

​
Leaderboard

Display rankings: 
import { Leaderboard } from '@engagefabricsdk/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 '@engagefabricsdk/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 '@engagefabricsdk/react';

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

​
Hooks

​
usePlayer

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>
  );
}

​
useQuests

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>
  );
}

​
useLeaderboard

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>
  );
}

​
useRealtime

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>;
}

​
Theming

Customize component styles: 
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>
  );
}

​
CSS Variables

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

​
Other Frameworks

For non-React frameworks (Vue, Angular, Svelte), use the JavaScript SDK directly or integrate via the REST API. See the SDK Overview for all integration options including Python, Ruby, PHP, and cURL examples.