Component Adapter Types

The Component Adapter system uses TypeScript interfaces to ensure type safety and consistent behavior. This document provides links to the type definitions you'll need when implementing custom components.

Core Types

ComponentsContextType - The main interface defining all customizable UI components
GustoProviderCustomUIAdapterProps - Props for the custom UI adapter
UI Component Props - Individual component prop interfaces

Example Interface Structure

Here's a simplified look at some common interfaces (see GitHub links above for complete definitions):

// Main component context interface
interface ComponentsContextType {
  Button: (props: ButtonProps) => JSX.Element | null
  TextInput: (props: TextInputProps) => JSX.Element | null
  // ... many more components
}

// Example of a component props interface
interface ButtonProps {
  children: ReactNode
  isDisabled?: boolean
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
  variant?: 'primary' | 'secondary' | 'tertiary'
  // ... additional props
}

Importing Types

All types are exported from the SDK package:

import type {
  ComponentsContextType,
  ButtonProps,
  TextInputProps,
  // ... other types as needed
} from '@gusto/embedded-react-sdk'

Type Safety

The Component Adapter system leverages TypeScript to ensure type safety:

Compile-time checking: TypeScript will flag any missing or incorrect props in your component implementations
IDE support: You get autocomplete and documentation for all required props
Type inference: TypeScript can infer the types of your event handlers and other callback functions

For implementation examples and getting started guidance, see the Setup Guide.

Back to Component Adapter Overview