Skip to main content

useMolecularComponentConfig

useMolecularComponentConfig is a custom hook used to convert a molecular component style config to the appropriate React Native styles.

It takes the benefits of the useAtomicComponentConfig hook to the next level, allowing you to create complex components by combining different atomic components while still maintaining the ease of the styling through a component style config.

Import#

import { useMolecularComponentConfig } from "pearl-ui";

Return value#

The useMolecularComponentConfig hook returns an object which contains the style props grouped by their respective parts.

As an example, here's what the output value looks like for the Button component:

{  "icon": {    "color": "neutral.100",    "size": "l"  },  "root": {    "alignItems": "center",    "backgroundColor": "primary.500",    "borderRadius": "m",    "justifyContent": "center",    "margin": "2xs",    "px": "m",    "py": "m",    "style": {      "display": "flex"    }  },  "spinner": {    "color": "neutral.100",    "size": "l"  },  "text": {    "color": "neutral.100",    "variant": "btn1"  }}

As you can see, the hook returns the appropriate props in their respective buckets so that they can be passed on to the underlying atomic components directly.

Usage#

Let's update the ColorView example mentioned in the useAtomicComponentConfig section to a molecular component built using 2 atomic components:

  1. View
  2. Text
import { extendTheme } from "pearl-ui";
const colorViewConfig = {  parts: ["view", "text"],  baseStyle: {    view: {      backgroundColor: {        light: "neutral.300",        dark: "neutral.600",      },      borderWidth: 2,      borderColor: "red",    },    text: {      variant: "p2",    },  },  variants: {    redBox: {      view: {        backgroundColor: "red",      },      text: {        color: "red",      },    },    cyanBox: {      view: {        backgroundColor: "cyan",        borderColor: "cyan",      },      text: {        color: "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 = useMolecularComponentConfig(    "ColorView",    props,    { variant: props.variant },    props.colorScheme,    colorViewStyleFunctions,    "view",    "text"  );
  return (    <View {...componentConfig.view}>      <Text {...componentConfig.text}>{props.children}</Text>    </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 PearlTheme.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.
styleFunctionsfalseStyleFunctionContainer[]boxStyleFunctionsList of style functions to use for computing the received style props
targetKeyForOverridenStylePropsfalsestring | undefinedThe part where the style props passed to the component instance should be reflected. If undefined, the style props are passed to the first part as specified in the config
targetKeyForOverridenNativePropsfalsestring | undefinedThe part where other native props (non-style props) passed to the component instance should be reflected. If undefined, the native props are passed to the first part as specified in the config