BorderBox

Reference

• The BorderBox component is a styled div created.
• we can dynamically apply styles such as borders, box shadows, alignment, and background colors based on the props passed to it.

Props

• we can pass styling

Usage

function Example(pageContext) {
  const { protrakComponents } = React.useContext(customWidgetContext);
  const { BorderBox } = protrakComponents;

  return (
    <BorderBox
      display="flex"
      justifyContent="center"
      alignItems="center"
      direction="column"
      width="300px"
      backgroundColor="PRIMARY_LIGHT"
      boxShadow="0px 4px 6px"
      box_shadow_color="PRIMARY_SHADOW"
      border={{
        side: 'all',
        size: '2px',
        style: 'solid',
        color: 'PRIMARY',
        radius: '8px',
      }}
      textAlign="center"
    >
      <p>This is a BorderBox component</p>
    </BorderBox>
  );
};

UI