# fbox

> Flexbox Component for React. Powered by Styled-Components.

Latest version **1.3.1** (published 2018-07-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install fbox
pnpm add fbox
yarn add fbox
bun add fbox
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.1 |
| Published | 2018-07-23 |
| First published | 2017-06-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 9.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 23 |
| Author | Nantaphop Phuengphae |
| Maintainers | nantaphop |
| Keywords | flexbox, style, styled-components, layout |

## Links

- npm: https://www.npmjs.com/package/fbox
- Repository: https://github.com/nantaphop/fbox
- Homepage: https://github.com/nantaphop/fbox#readme
- Issues: https://github.com/nantaphop/fbox/issues
- npm.io page: https://npm.io/package/fbox

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^15.6.1
- [react-dom](https://npm.io/package/react-dom.md) ^15.6.1
- [styled-components](https://npm.io/package/styled-components.md) ^3.2.6

## Recent versions

- 1.3.1 (latest) — 2018-07-23
- 1.3.0 — 2018-07-23
- 1.2.0 — 2018-05-15
- 1.1.4 — 2018-05-15
- 1.1.3 — 2018-05-15
- 1.1.2 — 2017-06-25
- 1.1.1 — 2017-06-25
- 1.1.0 — 2017-06-24
- 1.0.1 — 2017-06-24
- 1.0.0 — 2017-06-24

## README

# 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: ____;

---
_Source: https://npm.io/package/fbox · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._