boxible v2.0.0

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

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.