import { DefaultPropsProvider } from '@uhg-abyss/mobile/ui/DefaultPropsProvider';

Overview

DefaultPropsProvider lets you set default props for multiple components in one place. This helps keep your app consistent and reduces repeated code.

<DefaultPropsProvider
  components={{
    [componentName]: {
      // ...default props for the component
    },
    // Example:
    Button: {
      variant: 'destructive',
    },
  }}
>
  {/* ...children */}
</DefaultPropsProvider>

How it Works

The provider uses React Context to pass default props down to child components. Each component uses the useDefaultProps hook internally to merge the provider's defaults with its own props, with component-specific props taking precedence.

Prop Priority (highest to lowest):

• Props passed directly to the component
• Default props from DefaultPropsProvider
• Component's built-in default props

Opting Out of Defaults

To opt out of the defaults, you can set the disableDefaultProviderProps prop to true on the component. This will prevent the component from inheriting any default props set by the provider.

Button

<DefaultPropsProvider
  components={{
    Button: {
      icon: 'star',
      iconPosition: 'leading',
      variant: 'destructive',
    },
  }}
>
  <Layout.Stack alignItems="center">
    <Button>Provider defaults</Button>
    <Button variant="neutral">Provider defaults with color override</Button>
    <Button disableDefaultProviderProps>Opt out of provider defaults</Button>
  </Layout.Stack>
</DefaultPropsProvider>