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.