FBox
Flexbox Component for Reactjs. Powered by Styled-Components.
Motivation
Flexbox is really powerful but it have to write so many css style. Moreover, we have to write a lot of boilerplate code to set the layout of our component for example FBox will turn following boilerplate style to something more sugar!
display: flex;
flex-direction: row;
justify-content: center;
alignItems: center;
padding: 10px;
with FBox you can just write...
<FBox row center alignCenter p="10px">.....</FBox>
Installation
npm install --save fbox
Usage
import FBox from 'fbox'
...
...
<FBox alignCenter center p="10px">
....Your contents...
</FBox>
Noted: Usually, you will have to use nested FBox together to create a layout.
Example
please check /stories/index.js
for example usage. You also use npm run storybook
to run the sample on your machine.
Props
Props that is Boolean type you just have to add props name to FBox like this <FBox center alignCenter>...</FBox>
Props that is string type you have to add value to FBox like this <FBox background="red" p="10px" ml="2em">...</FBox>
Prop Type | Prop Name | Generate CSS |
---|---|---|
Boolean | column | flex-direction: column; |
Boolean | columnReverse | flex-direction: column-reverse; |
Boolean | row | flex-direction: row; |
Boolean | rowReverse | flex-direction: row-reverse; |
Boolean | center | justify-content: column-reverse; |
Boolean | flexStart | justify-content: column-reverse; |
Boolean | flexEnd | justify-content: flex-end; |
Boolean | baseline | justify-content: baseline; |
Boolean | spaceBetween | justify-content: space-between; |
Boolean | spaceAround | justify-content: space-around; |
Boolean | contentCenter | align-content: content-center; |
Boolean | contentFlexStart | align-content: flex-start; |
Boolean | contentFlexEnd | align-content: flex-end; |
Boolean | contentBaseline | align-content: baseline; |
Boolean | contentSpaceBetween | align-content: space-between; |
Boolean | contentSpaceAround | align-content: space-around; |
Boolean | alignCenter | align-items: center; |
Boolean | alignFlexStart | align-items: flex-start; |
Boolean | alignFlexEnd | align-items: flex-end; |
Boolean | alignBaseline | align-items: baseline; |
Boolean | alignStretch | align-items: stretch; |
Boolean | selfCenter | align-self: center; |
Boolean | selfFlexStart | align-self: flex-start; |
Boolean | selfFlexEnd | align-self: flex-end; |
Boolean | selfBaseline | align-self: baseline; |
Boolean | selfStretch | align-self: stretch; |
Boolean | grow1 | flex-grow: 1; |
Boolean | grow2 | flex-grow: 2; |
Boolean | grow3 | flex-grow: 3; |
Boolean | grow4 | flex-grow: 4; |
Boolean | grow5 | flex-grow: 5; |
Boolean | shrink1 | flex-shrink: 1; |
Boolean | shrink2 | flex-shrink: 2; |
Boolean | shrink3 | flex-shrink: 3; |
Boolean | shrink4 | flex-shrink: 4; |
Boolean | shrink5 | flex-shrink: 5; |
Boolean | wrap | flex-wrap: wrap; |
Boolean | nowrap | flex-wrap: nowrap; |
Boolean | wrapReverse | flex-wrap: wrap-reverse; |
string | background | background: ____; |
string | width | width: ____; |
string | height | height: ____; |
string | p | padding: ____; |
string | pt | padding-top: ____; |
string | pr | padding-right: ____; |
string | pb | padding-bottom: ____; |
string | pl | padding-left: ____; |
string | m | margin: ____; |
string | mt | margin-top: ____; |
string | mr | margin-right: ____; |
string | mb | margin-bottom: ____; |
string | ml | margin-left: ____; |