useMolecularComponentConfig

The useMolecularComponentConfig is a custom hook that transforms a molecular component style config into corresponding React Native styles.

This hook extends the functionality of the useAtomicComponentConfig hook, enabling the creation of intricate components by merging various atomic components. It also simplifies the styling process through a component style config.

Import

import { useMolecularComponentConfig } from "pearl-ui";

Return value

The useMolecularComponentConfig hook yields an object that includes the style props, which are grouped according to their respective parts.

For instance, the output value for the Button component would look like this:

{  "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 demonstrated, the hook segregates the appropriate props into their respective categories, allowing them to be directly passed to the underlying atomic components.

Usage

To demonstrate the application of useMolecularComponentConfig, we'll modify the ColorView example from the useAtomicComponentConfig section. We'll convert it into a molecular component that merges two atomic components:

1. View
2. Text

import { extendTheme,  } from "pearl-ui";import { ViewProps, TextProps } from "react-native";
type ColorViewAtoms = {  view: ViewProps;  text: TextProps;};

const colorViewConfig: MolecularComponentConfig<ColorViewAtoms> = {  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 {  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> & {    colorScheme?: string;  };
const ColorView: React.FC<ComponentProps> = (props) => {  const componentConfig = useMolecularComponentConfig(    "ColorView",    props,    { variant: props.variant },    props.colorScheme,    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 { useStyleProps, backgroundColor, border } from "pearl-ui";
const colorViewStyleFunctions = [border, backgroundColor];
const ColorView = (props) => {  const componentConfig =    useMolecularComponentConfig <    ColorViewAtoms >    ("ColorView",    props,    { variant: props.variant },    props.colorScheme,    colorViewStyleFunctions,    "view",    "text");
  return (    <View {...componentConfig.view}>      <Text {...componentConfig.text}>{props.children}</Text>    </View>  );};

And there you have it! You can now manipulate 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 PearlTheme.components whose config will be used
receivedProps	Yes	object		The raw props that are passed to the component where the hook is being used
sizeAndVariantProps	No	{size: string | undefined, variant: string | undefined}	{ size: undefined, variant: undefined }	Specifies the custom size and variant configuration to be used
colorScheme	No	string	"primary"	Defines the active color scheme of the component
targetKeyForOverridenStyleProps	No	string | undefined		Identifies 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	No	string | undefined		Identifies 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