node package manager


React Reflex Layout

A simple implementation for flexbox components.


npm i react-reflex-layout [--save]


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 />
                <Spacer flexBasis="5px" flexGrow={0} flexItemClass="has-black-background"/>
                <FlexItem flexItemClass="MyComponent-Content">
                    <FlexBox flexDirection="row">
                        <MySideBarAsFlexItem flexBasis="20%" flexGrow={0} />
                            <MyMainContent />
                <FlexItem flexItemClass="MyComponent-Footer">
                    <MyComponentFooter />

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.


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

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