boxible

make flexbox containers in typescript using styled-components

Uses styled-components 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 prop validation.

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

import { Box } from 'boxible'

<Box align="between" grow>
  <Box align="middle">Left</Box>
  <Box box direction="column>
    <Box align="end>Right Top</Box>
    <div>Right Middle Content</div>
    <divRight Bottom</div>
  </Box>
</Box>

-----------------------------------
|                        Right Top |
|    Left     Right Middle Content |
|             Right Bottom         |
-----------------------------------

Credits

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