react-boxen

React Boxen

A layout primitive for React.

Boxen utilizes glamor to provide cross-browser/cross-platform layout.

Why?

• Flex Box Plus - Provides a helpful layer of abstraction on top of the robust (and sometimes confusing) display flex properties
• Child spacing - Provides consistent spacing between child elements vertically, horizontally, and wrapping

Basic Usage

import Box from "react-boxen"

export default function MyComponent(props) {
  return (
    <Box
      style={{backgroundColor: "whitesmoke"}}
      padding="20px"
      childSpacing="10px">
      <Box grow="1">Box 1</Box>
      <Box grow="1">Box 2</Box>
      <Box grow="1">Box 3</Box>      
    </Box>
  )
}

API

Property	Type	Value (default *)	Description
align	String	auto * flex-start flex-end center stretch baseline	Override childAlign of parent <Box/>
basis	String	Length	Individual flex-basis. Think of it as ideal length.
childAlign	String	flex-start * flex-end center stretch baseline	Align children along the cross axis
childBasis	String	Length	When childWrap='wrap' and non-percentage length, children will grow/shrink to roughly maintain this size. Think of it as ideal length.
childDirection	String	column * column-reverse row row-reverse	Vertical or horizontal orientation of children
childJustify	String	flex-start * flex-end center space-between space-around	Align children along the main axis
childWrap	String	nowrap * wrap wrap-reverse	Define whether or not children can wrap
childWrapLastGrow	String	nowrap * wrap wrap-reverse	Define whether or not children can wrap
childWrapCount	Number	20 *	Typical items show before wrapping. Useful for maintaining ChildBasis width when fewer than typical wrap count.
childSpacing	String	Length	Spacing between children on any axis
css	String	Template literal containing valid CSS	See styled-components documentation
grow	Number	0 *	Amount Box should grow to fill available space
height	String	Length	...
padding	String	CSS length	...
shrink	Number	1 *	Amount Box should shrink inside available space
width	String	Length	...
...rest	Any	Any	Rest of props (aside from children) are spread onto Box itself (e.g. onClick, onPress, etc.)

Roadmap

Technically, there is nothing preventing usage with React Native. The web is a more immediate proving ground. As the API solidifies, testing and support will be hammered out for RN. PRs are always welcome!