Setup

Import the stylesheet once, then wrap your tree in two providers: NoughtyToursProvider supplies the client, I18nProvider supplies the language.

import {
  NoughtyToursController,
  NoughtyToursProvider,
  I18nProvider,
  ToursList
} from "@thenoughtyfox/noughty-tours-web-sdk";

import "@thenoughtyfox/noughty-tours-web-sdk/style.css";

const NTController = new NoughtyToursController({ getBearerToken });

export function App() {
  return (
    <NoughtyToursProvider client={NTController}>
      <I18nProvider defaultLocale="en">
        <ToursList onSelect={tour => navigate(`/tours/${tour.id}`)} />
      </I18nProvider>
    </NoughtyToursProvider>
  );
}

Each component fills the viewport

They are page-level screens, sized to the full window height — give each one its own route rather than embedding it in an existing layout.

NoughtyToursProvider

Required. Supplies the client every component reads through, and sets up the internal query cache. A component rendered outside this provider throws.

Prop	Type	Description
client (required)	NoughtyToursController	The client instance. Create it once, outside your component tree.
children (required)	ReactNode	Your application.

I18nProvider

Required. Supplies the active language. English, Romanian, Russian and German ship built in.

Prop	Type	Description
children (required)	ReactNode	Your application.
defaultLocale	Locale	Starting language when uncontrolled. Defaults to "en".
locale	Locale	Pass to control the language yourself. The built-in switcher then reports through onLocaleChange instead of changing it directly.
onLocaleChange	(locale: Locale) => void	Fires when the user picks a language.
messages	Partial<Record<Locale, Dict>>	Overrides for individual strings, merged over the built-in set.

note

The SDK never writes to storage. To remember a choice across visits, persist it from onLocaleChange and feed it back through locale.

See Localisation for building your own picker and overriding strings.

The four screens

Component	Reads	Page
ToursList	tours.list()	Reference
TourManager	tours.get(id)	Reference
Viewer	tours.get(id)	Reference
PublicViewer	tours.getBySlug(slug)	Reference