React Component

Use @codemodity/betting-ui-react when your host application is built with React and you want the sportsbook mounted directly in the page. The package injects the environment’s sportsbook.js script and forwards your props to window.Sportsbook.mount().

If you need a cross-origin iframe embed, custom iframe wrapper, postMessage integration, or URL deep links, see Iframe Integration.

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, let the component occupy the full available width. On mobile devices, it should be allowed to use the full screen width.

import { Sportsbook } from '@codemodity/betting-ui-react'
 
function YourSportsbookPage() {
    return (
        <Sportsbook
            tenantRef="exampleTenant"
            authToken="yourAuthToken"
            language="en-US"
            currency="USD"
            themeId="dark"
            environment="production"
            isTestMode={false}
            isUsLayout={false}
            topMenu={['search', 'home', 'live', 'my-bets', 'all-sports']}
            styles={{
                appHeight: '100%',
                background: '220 27.27% 6.47%',
                classnames: {
                    betslip: {
                        trigger: 'betslip-trigger',
                        content: 'betslip-content',
                    },
                },
            }}
            onRequireLogin={() => console.log('Login required')}
            onSessionExpiredReload={() => window.location.reload()}
            getBalance={async () => 100}
            onLoad={() => console.log('Sportsbook loaded')}
            hideLoading={false}
            loadingSpinnerElement={<div>Loading...</div>}
        />
    )
}

tenantRef is required. authToken can be omitted only for unauthenticated preview flows, depending on your tenant configuration.

Environment

The environment prop selects the hosted sportsbook bundle loaded by the component.

`environment`	Script base URL
`qa`	`https://betting-qa.sportsmodity.com`
`dev`	`https://betting-dev.sportsmodity.com`
`mex-qa`	`https://betting-qa-mxce1.sportsmodity.com`
`mex-demo`	`https://betting-demo-mxce1.sportsmodity.com`
`mex-staging`	`https://betting-staging-mxce1.sportsmodity.com`

Custom environment names are also accepted. They resolve to https://betting-{environment}.sportsmodity.com.

Props

Prop	Required	Type	Notes
`tenantRef`	Yes	`string`	Tenant identifier provided during integration setup.
`authToken`	No	`string`	Player session token. Required for authenticated betting.
`language`	No	`string`	Language code, for example `en`, `en-GB`, `en-US`, or `ja`.
`currency`	No	`string`	Wallet currency code, for example `USD` or `GCOIN`.
`themeId`	No	`string`	Theme preset, for example `dark`, `light`, or `system`.
`environment`	No	`string`	Selects the sportsbook script base URL. Defaults to `qa`.
`isUsLayout`	No	`boolean`	Enables US-style layout when `true`.
`isTestMode`	No	`boolean`	Enables test API behavior.
`topMenu`	No	`TopMenuItemType[]`	Allowed values: `search`, `home`, `live`, `my-bets`, `all-sports`, `dynamic`.
`styles`	No	`AppStyles`	Container height, background, and host class names.
`onRequireLogin`	No	`() => void`	Called when an unauthenticated user attempts a gated action.
`onSessionExpiredReload`	No	`() => void`	Called when the sportsbook session expires.
`getBalance`	No	`() => number \| null \| undefined \| Promise<number \| null \| undefined>`	Returns the current wallet balance for betslip validation.
`onLoad`	No	`() => void`	Called when the sportsbook finishes loading.
`hideLoading`	No	`boolean`	Hides the sportsbook bundle’s built-in loading state.
`loadingSpinnerElement`	No	`ReactNode`	React overlay shown until `onLoad` fires.
`hostElementSelector`	No	`string`	Advanced. The React wrapper renders `#sportsbookRoot`; only change this if you fully control the mount target.
`betslipClassnames`	No	`{ trigger?: string; content?: string }`	Deprecated. Use `styles.classnames.betslip` instead.
`homeClassnames`	No	`{ featuredHeaderWrapper?: string }`	Deprecated. Use `styles.classnames.home` instead.

Styles

Use styles for host-level layout and class hooks:

<Sportsbook
    tenantRef="exampleTenant"
    styles={{
        appHeight: '100%',
        background: '220 27.27% 6.47%',
        classnames: {
            betslip: {
                trigger: 'betslip-trigger',
                content: 'betslip-content',
            },
            home: {
                featuredHeaderWrapper: 'featured-header-wrapper',
            },
        },
    }}
/>

styles.background uses HSL components only, without the hsl() wrapper.

Authentication callbacks

The host application owns login and session refresh behavior. When the sportsbook needs the player to authenticate, onRequireLogin is called. When the session expires, onSessionExpiredReload is called.

<Sportsbook tenantRef="exampleTenant" authToken={authToken} onRequireLogin={() => openLoginModal()} onSessionExpiredReload={() => window.location.reload()} />

When tenantRef, authToken, language, currency, themeId, layout, styles, callbacks, or topMenu change, the wrapper unmounts and remounts the sportsbook with the new values.

Routing and Deep Links

The React component does not expose a route prop. The sportsbook reads its route from the page URL query parameter sb-path, for example ?sb-path=live/soccer or ?sb-path=my-bets.

For iframe embeds and a full list of supported sb-path values, see Iframe Integration.

Iframe Integration General