Skip to main content

useAtomicComponentConfig

useAtomicComponentConfig is a custom hook used to convert an atomic component style config to the appropriate React Native styles.

It intakes the default component config, desired size/variant configuration, and custom style props passed into a component to stitch together a final styles object in the following priority order:

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

Import#

import { useAtomicComponentConfig } from "pearl-ui";

Return value#

The useAtomicComponentConfig hook returns an object which is a combination of custom props and React Native styles computed using style props.

As an example, here's what the output value looks like for the wave variant of the Spinner component:

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

As you can see, the color style prop gets converted to a valid React Native style and the other props are returned without any modification. This is very powerful when you're trying to convert a third-party component to a Pearl UI compatible component.

Usage#

Let's update the ColorView example mentioned in the useStyledProps section to use 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,  },});
ColorViewComponent.jsx
import React from "react";import { View } from "react-native";import { useStyledProps, 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>;};

That's it! Now, you can control the active visual style of the component using the variant prop:

<ColorView variant="cyanBox" />

Parameters#

NameRequiredTypeDefaultDescription
themeComponentKeytruePearlTheme.componentsName of the component in theme.components who's config needs to be used
receivedPropstrueobjectRaw props passed to the component where the hook is being used
sizeAndVariantPropsfalse{size: string | undefined, variant: string | undefined}{ size: undefined, variant: undefined }Custom size and variant configuration to use
colorSchemefalsestring"primary"Active color scheme of the component.
styleFunctionsfalseArray of Style FunctionsboxStyleFunctionsList of style functions to use for computing the received style props