React Layout Components

npm install react-layout-components

Provides useful layout components for React.js based on flexbox.
There will soon also be some predefined common layouts which then can be added separately by including react-layout-components/layouts.

The basis Box Component is highly inspired by React Native's Flexbox implementation and though accepts almost the same props.
It supports all flexbox specifications and automatically adds alternative values and prefixes thanks to inline-style-prefixer if needed.

Note: If you're not familiar with Flexbox at all, I recommend css-tricks 'Complete Guide to Flexbox' which is an awesome source for beginners as well as a nice refreshment for experts.

Box

Box is an universal container component based on flexbox.
You can most likely use this Component for everything as is helps recreating almost any possible layout.

import React from 'react';
import Box from 'react-layout-components';

export class Example extends React.Component {
  render(){
    return (
      //This acts as some kind of container
      <Box width={300} height={500} overflowY='scroll' borderWidth={10} borderTop>
        <Box padding={5}>
          //This acts as an actual flexbox container
          <Box row justifyContent="center" alignItems="flex-start">
            <Box flex={3}>Box2</Box>
            //You can also pass string values instead of numbers
            <Box flex="1" alignSelf="baseline">Box1</Box>
          </Box>
        </Box>
        
        //This turns out to be an absolute positioned, fixed box
        <Box fixed top={10} left={50} minHeight={400}>Box3</Box>
      </Box>
    )
  }
}

Props

Box comes with a lot of configuration abilities. There are basically 3 groups of properties.

Note that you may pass any valid prop since Box completely hands them directly to inner Components, but take care if doing so since you may pass style values that could overwrite layout props.

Box-model

Box accepts any box model property known from CSS.

• Padding: padding (shortcut), paddingLeft, paddingTop, paddingRight, paddingBottom
• Margin: margin (shortcut), marginLeft, marginTop, marginRight, marginBottom
• Border: border (shortcut), borderColor, borderWidth, borderStyle, borderTop, borderLeft, borderBottom, borderRight
• Size: width, height, minWidth, maxWidth, minHeight, maxHeight
• Flow: overflow, overflowX, overflowY
• Position: top, left, bottom, right

You may also set boxSizing which defines how the size of a box is calculated. You may use border-box, content-box or padding-box.

Shortcuts

There are some shortcut properties. They do not accept a value. e.g. <Box fixed></Box>.

Flexbox

Browser default values don't need to be set explicit and are defined as

{
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  flex-wrap: nowrap;
}

Shortcuts

There also are some flexbox shortcuts which don't accept a value.

License

react-layout-components is licensed under the MIT License.
Created with ♥ by @rofrischmann.