boxible

make flexbox containers in typescript using emotion

Uses emotionjs to style a div using flexbox styles. React components can easily set any flexbox style using component properties. Typescript gives you nice code completion and type-safe validations.

Full docs are published at https://nathanstitt.github.io/boxible/

import { Box } from "boxible";

const Layout = () => (
  <Box direction={{ mobile: "columReverse", tablet: "column" }}>
    <Box justify="between">
      <Box align="start">Left</Box>
      <Box align="end" direction="column">
        <span>Right Top</span>
        <span>Right Center</span>
      </Box>
    </Box>
    <Box justify="center">Bottom Center</Box>
  </Box>
);

On a desktop sized (>992px), the display will be:

 Left                   Right Top
                     Right Center
        Bottom Center

And on a mobile sized device (<=576px) the display would be:

        Bottom Center
                     Right Center

Left Right Top

Screen sizes are defined as SCREEN_SIZES in styles.ts

Their definitions can be overridden as detailed in the hacking sizes test.ts

Boxible Props

property	allowed values	default
align	baseline, center, end, start, stretch
alignContent	around, between, center, end, start, stretch
direction	column, row	row
justify	around, between, center, end, evenly, start
flex	true, false, grow, shrink
basis	string value, auto, full, 1/2, 1/4, 1/3, 2/3
gap	px value, small, medium, large, xxlarge	false
height	string,( min, max )
width	string, ( min, max )
fill	boolean, 'horizontal', 'vertical'
wrap	boolean	false
className	string
padding	px value, small, medium, large, xxlarge	Size
margin	px value, small, medium, large, xxlarge	Size
centered	true	false

align, alignContent, direction, gap, and justify are "responsive" and can alternatively be prefixed with a size

Since the Box element is a emotionjs component, you can also use the "as" prop to render elements other than div, such as label to wrap inputs.

<Box as="label">
  <input name="foo" />
  <b>Click to focus input</b>
</Box>

extractBoxibleProps(props)

A utility function to aid in composing nested components. A small example:

import { Box, BoxProps, extractBoxibleProps }
import { Calc, CalcProps } from 'fake' // another component that accepts
const Combined<CalcProps & BoxProps> = (props) => {
  const [boxProps, calculateProps] = extractBoxibleProps<CalcProps>(props)
  return (
    <Box {...boxProps}><Calc {...calcProps} /></Box>
  )
}

Credits

Boxible is based loosely on Grommt’s Box component, but re-written in Typescript and with a few differences, such as no animation support.