Box component · We The Curious Developers

A layout component using Hedron flexbox layout library.

Install

npm i @wethecurious/wtc-ui-library

Import it into your project

import { BoxBounds, BoxProvider, BoxBox } from '@wethecurious/wtc-ui-library'

<BoxBounds direction="vertical">
  <Box>Header</Box>
  <Box>Content</Box>
  <Box>Footer</Box>
</BoxBounds>

Prop	Description	Default
`debug`	Outlines the grid system so you can visualize the layout	`false`
`flex`	Controls the CSS flex property
`direction`	Sets the primary axis the children should be in line with	`horizontal`
`wrap`	Sets whether the children should wrap when there's no more room on the primary axis	`false`
`valign`	Alignment of children along the vertical axis
`halign`	Alignment of children along the vertical axis
`justify`	Set the justify-content value
`alignItems`	Set the align-items value
`alignContent`	Set the align-content value
`basis`	Set the flex-basis as a string value
`wrap`	Sets the flex-wrap property using `FlexWrap.Wrap` or `FlexWrap.NoWrap`

Prop	Description	Default
`debug`	Outlines the grid system so you can visualize the layout	`false`
`flex`	Controls the CSS flex property
`fill`	Sets whether the Box should fill up all available space
`fluid`	Convenience property for disabling padding
`shiftRight`	Shifts the box to the right of the parent BoxBounds
`shiftLeft`	Shifts the box to the left of the parent BoxBounds
`shiftUp`	Shifts the box to the top of the parent BoxBounds
`shiftDown`	Shifts the box to the bottom of the parent BoxBounds