Frontend IntegrationUI component - React

React

A React component library is provided to enable simple integration of the Sportsbook UI with web sites.

⚠️

This page is a work in progress. It contains just enough information to demonstrate how the UI integrates into the host website. It will be updated later with more information, including the full set of attributes that can be passed to the Sportsbook component.

Install

npm i @codemodity/betting-ui-react

Usage

Import the Sportsbook component from the library and place it anywhere on your page. For the best user experience, the component should be able to occupy as much horizontal space as possible. On mobile devices, it should be allowed to occupy the full screen width.

Real mode

import { Sportsbook } from '@codemodity/betting-ui-react'
 
function YourSportsbookPage() {
    return (
          <Sportsbook
            tenantRef="exampleTenant"
            authToken="yourAuthToken"
            language="en"
            currency="USD"
            themeId="darkTheme"
            onRequireLogin={() => console.log('Login required')}
            environment="production"
            isTestMode={false}
            betslipClassnames={{
                trigger: 'betslip-trigger',
                content: 'betslip-content',
            }}
            onLoad={() => console.log('Sportsbook loaded')}
            hideLoading={false}
            loadingSpinnerElement={<div>Loading...</div >}
          />
    )
}

Demo mode

import { Sportsbook } from '@codemodity/betting-ui-react'
 
function YourSportsbookPage() {
    return (
        <Sportsbook isTestMode={true} />
    )
}