Skip to main content

Box, Containers

Reference​

  • Box: Standard component that provides a wrapper over an HTML div
  • Container is a styled derivative of Box that sets height and width to 100% and centers the content. All other props are passed through.
  • Recommended way is to use Box rather than using raw div

Props​

  • display: CSS display type. Default flex
  • direction: The flex direction, required when the display type is flex.
  • backgroundColor: Background color. Value should be specified from the color palette. See Color palette
  • color: Color. See Color palette
  • All other CSS properties of div can be set like border, height, width etc.

Usage​

const { protrakComponents } = React.useContext(customWidgetContext);
const { Box, Container } = protrakComponents;

return(
  <Box alignItems="center" {...props}>
    {children}
  </Box>

  <Box
    marginLeft="1rem"
    height="auto"
    overflow="auto"
    direction="column"
    width={'100%'}
    paddingRight="1rem"
  >
  </Box>
);