![Build Status](https://github.com/nathanstitt/boxible/actions/workflows/checks.yml/badge.svg)
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'
<Box align="between" grow>
<Box align="middle">Left</Box>
<Box box direction="column>
<Box align="end>Right Top</Box>
<div>Right Middle Content</div>
<div>Right Bottom</div>
</Box>
</Box>
-----------------------------------
| Right Top |
| Left Right Middle Content |
| Right Bottom |
-----------------------------------
Boxible Props
property | allowed values | default |
---|
align | baseline, center, end, start, stretch | |
alignContent | around, between, center, end, start, stretch | |
direction | column, row | row |
flex | true, false, grow, shrink | |
basis | string value, auto, full, 1/2, 1/4, 1/3, 2/3 | |
justify | around, between, center, end, evenly, start | |
gap | boolean | false |
height | string, { min, max} | |
width | string, { min, max } | |
fill | boolean, 'horizontal', 'vertical' | |
wrap | boolean | false |
className | string | |
pad | Size | Area |
margin | | 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>
-----------
| | click to focus input
-----------
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.