React

The React package wraps the web SDK in one component. It mounts the game when it renders, cleans up when it unmounts, and turns game events into props.

Install

npm install @krds-games/sdk-react

It works with React 18 and later.

Show a game

import { KrdsGame } from '@krds-games/sdk-react'

export function Promo({ clientToken }: { clientToken: string | null }) {
  return (
    <KrdsGame
      channelId="3f6b1c0a-8e2d-4b7a-9c15-2d4e6f8a0b1c"
      clientToken={clientToken}
      playBaseUrl="https://play.keliplay.com"
      onSessionCompleted={(payload) => {
        console.log('Play finished', payload.score)
      }}
    />
  )
}

The channel’s Embed tab in the dashboard has this snippet with your channel id filled in. Get clientToken from your backend, as described in Authentication. Pass null when nothing is live and the component shows the between-campaigns message.

Props

The component takes the same options as mount in the web SDK, plus className and style for the element that holds the frame.

Prop	Type	Default	Description
channelId	string		Required. The channel to show.
clientToken	string or null		The token for this play.
playBaseUrl	string		Where games load from: https://play.keliplay.com.
theme	'light' or 'dark'	'light'	Colour scheme.
locale	string		A language tag such as fr, for campaigns with translations.
initialHeight	number	420	Height in pixels before the game reports its own.
allowImmersive	boolean	true	Whether the game may expand to fill the screen when it asks to.
className	string		Class for the containing element.
style	object		Inline style for the containing element.

Event props

Each game event has a matching prop. The handler receives the event’s payload.

Prop	Event
onReady	ready
onResize	resize
onSessionStarted	session_started
onSessionCompleted	session_completed
onOutcomeRevealed	outcome_revealed
onPresentation	presentation
onError	error

Inline arrow functions are fine. Changing a handler does not reload the game.

When the game reloads

Changing channelId, clientToken or playBaseUrl removes the game and mounts it again. That is how you offer another play: fetch a new token and pass it in.

const [token, setToken] = useState<string | null>(initialToken)

async function playAgain() {
  const response = await fetch('/api/keliplay-token', { method: 'POST' })
  const { clientToken } = await response.json()
  setToken(clientToken)
}

Here /api/keliplay-token stands for a route on your own backend that asks Keliplay for a client token.

Server rendering

The component is a client component. It renders an empty container on the server and mounts the game in the browser, so it works in Next.js, Remix and other frameworks that render on the server.