# react-flexbox-component

> React Flexbox Component is a library to use flexbox css style to your components with real gutter and xRay option.

Latest version **0.2.9** (published 2018-09-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-flexbox-component
pnpm add react-flexbox-component
yarn add react-flexbox-component
bun add react-flexbox-component
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.9 |
| Published | 2018-09-21 |
| First published | 2018-09-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 36.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Christophe de Canteloube |
| Maintainers | christophe.decanteloube |

## Links

- npm: https://www.npmjs.com/package/react-flexbox-component
- npm.io page: https://npm.io/package/react-flexbox-component

## Recent versions

- 0.2.9 (latest) — 2018-09-21
- 0.2.8 — 2018-09-20
- 0.2.7 — 2018-09-20
- 0.2.6 — 2018-09-19
- 0.2.5 — 2018-09-18
- 0.2.4 — 2018-09-18
- 0.2.3 — 2018-09-18
- 0.2.2 — 2018-09-18
- 0.2.1 — 2018-09-18
- 0.2.0 — 2018-09-18
- 0.1.7 — 2018-09-17
- 0.1.6 — 2018-09-17
- 0.1.5 — 2018-09-17
- 0.1.4 — 2018-09-17
- 0.1.3 — 2018-09-17
- … 3 more at https://npm.io/package/react-flexbox-component/versions

## README

# React Flexbox Component

React Flexbox Component is a library to use flexbox css style to your components with real gutter and xRay option.

## Table of Content

- [Installing](#installing)
- [Getting started](#getting-started)
- [Usage](#usage)
  * [Props](#props)
    + [Column width](#column-width)
    + [Flex Grow](#flex-grow)
    + [Gutter](#gutter)
    + [Align items](#align-items)
    + [Align content](#align-content)
    + [Flex wrap](#flex-wrap)
    + [Justify content](#justify-content)
    + [xRay](#xray)


## Installing

```
npm install react-flexbox-component
```

## Getting started

```jsx
import React, { Component } from 'react'
import { Row, Column, Item } from 'react-flexbox-component'

class MyComponent extends Component {
  render() {
    return (
      <div>
        <Row gutter={8}>
          <Item>Item 1</Item>
          <Item>Item 2</Item>
        </Row>
        <Column>
          <Item>Item 1</Item>
          <Item>Item 2</Item>
        </Column>
      </div>
    )
  }
}

export default MyComponent;
```

## Usage

```jsx
{/* Direction : Row */}
<Row>...</Row>

{/* Direction : Column */}
<Column>...</Column>

{/* Flex item */}
<Item>...</Item>
```

### Props

#### Column width

```
xs >= 0
sm >= 600
md >= 960
lg >= 1280
xl >= 1920
```

Example
```jsx
<Row>
  {/* Auto width for all props xs sm md lg xl */}
  <Item xs>Item 1</Item>

  {/* @media (min-width: 0) flex-grow: 2; */}
  <Item xs={2}>Item 2</Item>

  {/* @media (min-width: 960) {flex-grow: 2}; */}
  {/* @media (min-width: 1280) {flex-grow: 4}; */}
  <Item md={2} lg={4}>Item 3</Item>
</Row>
```

#### Flex Grow

Change `flex-grow` attribute.
Prop : `grow`
Value : number
Default : null

```jsx
<Row>
  <Item grow={1}>Item 1</Item>
  <Item grow={8}>Item 2</Item>
</Row>
```

#### Gutter

Add a `margin` between boxes in pixel. Allowed for `Row` and `Column` and applied on direct children.

```jsx
{/* Margin of 8px between Item 1 and Item 2 */}
<Row gutter={8}>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
</Row>
{/* Margin of 16px between Item 3, Row and Div 1 */}
<Column gutter={16}>
  <Item>Item 3</Item>
  <Row>
    <Item>Item 4</Item>
    <Item>Item 5</Item>
  </Row>
  <div>Div 1</div>
</Column>
```

#### Align items

Change `align-items` attribute.
Value : `start` | `flex-start` | `end` | `flex-end` | `center` | `baseline` | `stretch`
Default : `flex-start`

```jsx
<Row align="start">
  <Item>Item 1</Item>
  <Item>Item 2</Item>
</Row>
```


#### Align content

Change `align-content` attribute.
Prop : `content`
Value : `start` | `flex-start` | `end` | `flex-end` | `center` | `space-between` | `space-around` | `stretch`
Default : `flex-start`

```jsx
<Row content="start">
  <Item>Item 1</Item>
  <Item>Item 2</Item>
</Row>
```

#### Flex wrap

Change `flex-wrap` attribute.
You can use the prop alone.
Prop : `wrap`
Value : `no-wrap` | `wrap` | `wrap-reverse`
Default : null

```jsx
{/* flex-wrap: wrap-reverse */}
<Row wrap="wrap-reverse">
  <Item>Item 1</Item>
  <Item>Item 2</Item>
</Row>
{/* flex-wrap: wrap */}
<Row wrap>
  <Item>Item 3</Item>
  <Item>Item 4</Item>
</Row>
```

#### Justify content

Change `justify-content` attribute.
Prop: `justify`
Value : `start` | `flex-start` | `end` | `flex-end` | `space-between` | `space-around` | `space-evenly`
Default : `flex-start`

```jsx
<Row justify="start" xRay>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
</Row>
```

#### xRay

Display 1px border and background color to help you to visualize your layout and their childs

```jsx
<Row xRay>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
</Row>
```

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