@quanda/react-box

A React component for rapid box modeling

Built with TypeScript and styled-components

Overview

Box is simply an HTML div element. What makes it unique are it's available props which are semantically defined to enable rapid layouts using common box-model attributes such as padding, margin, position, and so on.

Example: 12-column grid

<Box
  grid
  gtc="repeat(12, minmax(0, 1fr))"
  p='2em'
>
  {props.children}
</Box>

Installation via NPM

npm install @quanda/react-box

Usage

Basic Flexbox example

import { Box } from '@quanda/react-box';

const BoxDemo = () => {
  return (
    <Box
      flex
      ai='center'
      jc='space-between'
      maxw='720px'
      m='auto'
    >
      <span>A</span>
      <span>B</span>
      <span>C</span>
    </Box>
  )
}

export default BoxDemo;

Available Props

Note that many of the props are defined twice in order to allow for both shorthand and verbose usage. For example, the CSS property display can be set using either the d or display prop.

Full props list (with types)

{
  className?: string;
  children: JSX.Element[] | JSX.Element;
  d?: string;
  display?: string;
  h?: string;
  height?: string;
  minh?: string;
  minHeight?: string;
  maxh?: string;
  maxHeight?: string;
  w?: string;
  width?: string;
  minw?: string;
  minWidth?: string;
  maxw?: string;
  maxWidth?: string;
  pos?: string;
  position?: string;
  top?: string;
  bottom?: string;
  left?: string;
  right?: string;
  zi?: string;
  zIndex?: string;
  textAlign?: string;
  m?: string;
  margin?: string;
  mt?: string;
  marginTop?: string;
  mr?: string;
  marginRight?: string;
  mb?: string;
  marginBottom?: string;
  ml?: string;
  marginLeft?: string;
  p?: string;
  padding?: string;
  pt?: string;
  paddingTop?: string;
  pr?: string;
  paddingRight?: string;
  pb?: string;
  paddingBottom?: string;
  pl?: string;
  paddingLeft?: string;
  border?: string;
  borderRadius?: string;
  borderWidth?: string;
  flex?: boolean | string;
  row?: boolean;
  col?: boolean;
  fb?: string;
  flexBasis?: string;
  fw?: string;
  flexWrap?: string;
  fg?: string;
  flexGrow?: string;
  fs?: string;
  flexShrink?: string;
  ai?: string;
  alignItems?: string;
  ac?: string;
  alignContent?: string;
  als?: string;
  alignSelf?: string;
  ji?: string;
  justifyItems?: string;
  jc?: string;
  justifyContent?: string;
  js?: string;
  justifySelf?: string;
  gtc?: string;
  gridTemplateColumns?: string;
  gtr?: string;
  gridTemplateRows?: string;
  gar?: string;
  gridAutoRows?: string;
  gac?: string;
  gridAutoColumns?: string;
  gcs?: string;
  gridColumnStart?: string;
  gce?: string;
  gridColumnEnd?: string;
  gcg?: string;
  gridColumnGap?: string;
  grs?: string;
  gridRowStart?: string;
  gre?: string;
  gridRowEnd?: string;
  grg?: string;
  gridRowGap?: string;
  gg?: string;
  gridGap?: string;
  ga?: string;
  gridArea?: string;
  gc?: string;
  gridColumn?: string;
  gr?: string;
  gridRow?: string;
  scroll?: boolean;
  scrollY?: boolean;
  scrollX?: boolean;
}