React-reflex-layout NPM

React Reflex Layout

A simple implementation for flexbox components.

Installation

npm i react-reflex-layout --save

Example

import React, { PropTypes, Component } from 'react';
import { FlexBox, FlexRow, FlexColumn, FlexItem, Spacer, asFlexItem } from 'react-reflex-layout';

import MyComponentHeader from '../MyComponentHeader';
import MyComponentFooter from '../MyComponentFooter';
import MySideBar from '../MySideBar';
import MyMainContent from '../MyMainContent';

const MySideBarAsFlexItem = asFlexItem()(MySideBar);

class MyComponent extends Component {

    render() {
        return (
            <FlexColumn flexBoxClass="MyComponent">
                <FlexItem flexItemClass="MyComponent-Header">
                    <MyComponentHeader />
                </FlexItem>
                
                <Spacer flexBasis="5px" flexGrow={0} flexItemClass="has-black-background"/>
                
                <FlexItem flexItemClass="MyComponent-Content">
                    <FlexBox flexDirection="row">
                        <MySideBarAsFlexItem flexBasis="20%" flexGrow={0} />
                                
                        <FlexItem>
                            <MyMainContent />
                        </FlexItem>
                    </FlexBox>
                </FlexItem>
                
                <FlexItem flexItemClass="MyComponent-Footer">
                    <MyComponentFooter />
                </FlexItem>
            </FlexColumn>
        );
    }
}