Skip to content

Typescript React component to set flexbox properties on a element

Notifications You must be signed in to change notification settings

nathanstitt/boxible

Repository files navigation

Build Status

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.