React Integration (Advanced)

Most integrations should use the iframe approach instead. The React SDK is for advanced use cases where you need deep control over the game UI within your own React tree.

The Maktub SDK provides first-class React components for each game. Each component is a self-contained game UI that you embed directly in your React tree.

Requirements

React >= 18
React DOM >= 18

Pattern

Every game follows the same integration pattern:

Import the game component from its subpath
Import the game’s CSS
Render the component with the required props


import { <Game>GameSDK } from '@maktubbet/sdk/<game>'
import '@maktubbet/sdk/<game>/styles.css'
 
function App() {
 
 
  return (
    <<Game>GameSDK
      accessToken="user-jwt-token"
      user={{ betCount: 42, isAuthenticated: true }}
      updateBalance={(b) => console.log(b)}
      onAuthRequired={() => router.push('/login')}
      currency={{ code: 'USD', prefix: '$', rate: 1 }}
      language="en"
      logo={<img src="/logo.svg" alt="Logo" />}
      onToast={(t) => toast(t.title)}
      theme={{
        backgroundDark: '#1D121F',
        buttonColor: '#E6007A',
      }}
    />
  )
}

Props

All game components share the same props interface, including the optional theme prop for color customization. See Shared Props for the full table.

Next.js / SSR

All SDK components include the 'use client' directive. They work out of the box in Next.js App Router. Just import and render them in a client component.


'use client'
 
import { useState } from 'react'
import { DiceGameSDK } from '@maktubbet/sdk/dice'
import '@maktubbet/sdk/dice/styles.css'
 
export default function DicePage() {
 
 
  return (
    <DiceGameSDK
      accessToken={null}
      user={{ betCount: 0, isAuthenticated: false }}
      updateBalance={(b) => console.log(b)}
      onAuthRequired={() => {}}
    />
  )
}

Game Pages

Select a game from the sidebar to see its specific usage example: