node package manager
Easy collaboration. Discover, share, and reuse code in your team. Create a free org »

react-reflex-layout

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>
        );
    }
}

Available Components

  1. FlexBox - generic flexbox container
  2. FlexRow - flexbox row container
  3. FlexColumn - flexbox column container
  4. FlexItem - flex item component
  5. Spacer - an empty flex item

Available decorators

  1. asFlexItem - Wraps passed component in a FlexItem.

Refer code to see available properties for each component.

Scripts

  1. lint - npm run lint
  2. test - npm test
  3. build - npm run build
Warning

⚠️ This module is pretty new and might have some bugs, please file an issue if you encounter any problems.