Skip to main content
TapRailsThemeProvider is the root context provider for all TapRails UI components. It serves two purposes:
  1. Theme context — makes your color overrides available to all TapRails components via useTheme
  2. Session key management — automatically detects when a session key is missing and shows the SessionKeySetupFlow

​
Import

import { TapRailsThemeProvider } from '@taprails/tap-to-pay';

​
Usage

// Wrap your root component
export default function App() {
  return (
    <TapRailsThemeProvider
      colorOverrides={{
        primary: '#6366F1',
      }}
    >
      <YourApp />
    </TapRailsThemeProvider>
  );
}

​
Props

​
colorOverrides
Partial<TapRailsColors>
Optional color overrides to apply to the TapRails theme. Any keys not provided fall back to TapRails defaults.

​
TapRailsColors

interface TapRailsColors {
  primary: string;
  success: string;
  error: string;
  background: string;
  surface: string;
  text: string;
  textMuted: string;
  border: string;
}

​
useTheme

Access the merged theme (your overrides + TapRails defaults) inside any child component: 
import { useTheme } from '@taprails/tap-to-pay';

const theme = useTheme();
// theme.colors.primary
// theme.typography.styles.h1
// theme.typography.styles.body
useTheme must be called within a component that is a descendant of TapRailsThemeProvider. Calling it outside will throw an error.

​
TapRailsTheme Type

interface TapRailsTheme {
  colors: TapRailsColors;
  typography: {
    styles: {
      h1: TextStyle;
      h2: TextStyle;
      h3: TextStyle;
      body: TextStyle;
      bodySmall: TextStyle;
      label: TextStyle;
      button: TextStyle;
      mono: TextStyle;
    };
  };
}