React Reflex Layout
A simple implementation for flexbox components.
Installation
npm i react-reflex-layout [--save]
Example
;; ;;;; const MySideBarAsFlexItem = MySideBar; { 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
- FlexBox - generic flexbox container
- FlexRow - flexbox row container
- FlexColumn - flexbox column container
- FlexItem - flex item component
- Spacer - an empty flex item
Available decorators
- asFlexItem - Wraps passed component in a FlexItem.
Refer code to see available properties for each component.
Scripts
- lint - npm run lint
- test - npm test
- build - npm run build
Warning
⚠️ This module is pretty new and might have some bugs, please file an issue if you encounter any problems.