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 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": "xxs",    "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,  },});

Javascript

ColorView.tsx

import React from "react";import { View } from "react-native";import {  useStyledProps,  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 = useMolecularComponentConfig(    "ColorView",    props,    { variant: props.variant },    colorViewStyleFunctions  );
  return (    <View {...componentConfig.view}>      <Text {...componentConfig.text}>{props.children}</Text>    </View>  );};

Typescript

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 },    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

Name	Required	Type	Default	Description
themeComponentKey	true	PearlTheme.components		Name of the component in PearlTheme.components who's config needs to be used
receivedProps	true	object		Raw props passed to the component where the hook is being used
sizeAndVariantProps	false	{size: string | undefined, variant: string | undefined}	{ size: undefined, variant: undefined }	Custom size and variant configuration to use
styleFunctions	false	StyleFunctionContainer[]	boxStyleFunctions	List of style functions to use for computing the received style props
targetKeyForOverridenStyleProps	false	string | undefined		The 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
targetKeyForOverridenNativeProps	false	string | undefined		The 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