https://github.com/tcoopman/react-flexbox

React flexbox implementation
https://github.com/tcoopman/react-flexbox

Last synced: 5 days ago
JSON representation

React flexbox implementation

• Host: GitHub
• URL: https://github.com/tcoopman/react-flexbox
• Owner: tcoopman
• Created: 2015-01-09T08:46:18.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2017-12-10T17:36:49.000Z (about 7 years ago)
• Last Synced: 2024-12-31T03:09:21.743Z (12 days ago)
• Language: JavaScript
• Size: 43 KB
• Stars: 162
• Watchers: 9
• Forks: 12
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-react-components-all - react-flexbox - React flexbox implementation. (Uncategorized / Uncategorized)
• awesome-react - react-flexbox - React flexbox implementation.  (UI Components / Layout)
• awesome-list - react-flexbox - React flexbox implementation. (Soluções / Form Components)

README

        
# React-flexbox

Implementation of css flexbox in react with inline styles.

It is written in ES6 and requires an ES6 to ES5 transpiler. If there is need for

it I can add a transpiled version to the repo.

# API

## Install

```

npm install react-flexbox --save

yarn add react-flexbox

```

```js

const View = require('react-flexbox')

// or

import View from 'react-flexbox'

```

## UMD

Module exposed as `ReactFlexbox`

```

```

```js

const View = ReactFlexbox.default

```

## Components

### View

A flex view element that can be used instead of `FlexRow` or `FlexColumn`

This is default import.

Some simple examples:

```js

<View row>

  <View auto row>

    <View column width="100px"><View className="red">Left</View></View>

    <View column width="100px"><View className="red">Left</View></View>

  </View>

  <View row className="green">All the place in the world</View>

</View>

```

```js

<View column height="200px">

  <View column auto>

    <View className="green" height="20px">Green</View>

    <View className="red" height="20px">Red</View>

  </View>

  <View className="green">De rest</View>

</View>

```

### Props

All props are optional and can be set on both components.

#### row

boolean, sets the flexDirection to row

#### column

boolean, sets the flexDirection to column

#### auto

boolean, sets flex to '0 0 auto'

#### className

must be a string

#### height

_height_ must be a string with a valid css unit.

#### style

Will be merged the flex style. This allows you to override the style.

#### width

_width_ can be either a number `width={2}`, this acts as _flex-grow_ or a string

with a unit (for example _%_ or _px_) - it must be a valid css unit.

### FlexRow

*deprecated*

A flex row.

This is a `View` with prop `row`

### FlexColumn

*deprecated*

A flex column

This is a `View` with prop `column`

# Examples

See _examples_

To run, make sure the devDependencies are installed and run `npm run example`,

after that surf to _http://localhost:8080/webpack-dev-server/_