useAtomicComponentConfig

The useAtomicComponentConfig hook is a powerful tool that transforms an atomic component style config into a format that React Native can understand and apply.

This hook takes in the default component config, the desired size/variant configuration, and any custom style props passed into a component. It then combines these inputs into a final styles object, prioritizing them in the following order:

1. Custom style props (Highest priority)
2. size/variant styles from the component style config (Medium priority)
3. baseStyle from the component style config (Lowest priority)

Import

import { useAtomicComponentConfig } from "pearl-ui";

Return value

The useAtomicComponentConfig hook returns an object that merges custom props with React Native styles computed using style props.

For instance, consider the output value for the wave variant of the Spinner component:

{  "animating": true,  "animationDuration": 1200,  "count": 4,  "size": 30,  "style": {    "color": "#6A7BFF"  },  "waveFactor": 0.54,  "waveMode": "fill"}

In this example, the color style prop is transformed into a valid React Native style, while the other props are returned without any changes. This functionality is particularly useful when you need to adapt a third-party component to be compatible with Pearl UI.

Usage

To demonstrate the use of useAtomicComponentConfig, we will modify the ColorView example from the useStyleProps section to utilize the component style config approach:

import { extendTheme } from "pearl-ui";
const colorViewConfig = {  baseStyle: {    backgroundColor: {      light: "neutral.300",      dark: "neutral.600",    },    borderWidth: 2,    borderColor: "red",  },  variants: {    redBox: {      backgroundColor: "red",    },    cyanBox: {      backgroundColor: "cyan",      borderColor: "cyan",    },  },  defaults: {    variant: "redBox",  },};
const theme = extendTheme({  components: {    ColorView: colorViewConfig,  },});

Javascript

ColorView.tsx

import React from "react";import { View } from "react-native";import {  useStyleProps,  backgroundColor,  BackgroundColorProps,  border,  BorderProps,  StyleFunctionContainer,} from "pearl-ui";
type ColorViewProps = BackgroundColorProps &  BorderProps & {    /** Variant to use as defined in the active theme */    variant?: keyof (typeof colorViewConfig)["variants"];  };
const colorViewStyleFunctions = [  border,  backgroundColor,] as StyleFunctionContainer[];
type ViewProps = React.ComponentProps<typeof View> & {  children?: React.ReactNode;};type ComponentProps = ColorViewProps & Omit<ViewProps, keyof ColorViewProps>;
const ColorView: React.FC<ComponentProps> = (props) => {  const componentConfig = useAtomicComponentConfig(    "ColorView",    props,    { variant: props.variant },    colorViewStyleFunctions  );
  return <View {...componentConfig}>{props.children}</View>;};

Typescript

ColorViewComponent.jsx

import React from "react";import { View } from "react-native";import { useStyleProps, backgroundColor, border } from "pearl-ui";
const colorViewStyleFunctions = [border, backgroundColor];
const ColorView = (props) => {  const componentConfig = useAtomicComponentConfig(    "ColorView",    props,    { variant: props.variant },    undefined,    colorViewStyleFunctions  );
  return <View {...componentConfig}>{props.children}</View>;};

And there you have it! You can now control the active visual style of the component using the variant prop:

<ColorView variant="cyanBox" />

Parameters

Name	Required	Type	Default	Description
themeComponentKey	Yes	PearlTheme.components		Identifies the component in theme.components whose configuration is to be used
receivedProps	Yes	object		The raw props passed to the component where the hook is being used
sizeAndVariantProps	No	{size: string | undefined, variant: string | undefined}	{ size: undefined, variant: undefined }	Specifies custom size and variant configuration
colorScheme	No	string	"primary"	Defines the active color scheme of the component
styleFunctions	No	Array of Style Functions	boxStyleFunctions	Specifies the list of style functions for computing the received style props