tcoopman/react-flexbox

React flexbox implementation

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

const View = require('react-flexbox')
// or
import View from 'react-flexbox'

UMD

Module exposed as ReactFlexbox

<script src="https://unpkg.com/react-flexbox/dist/react-flexbox.js"></scrip>

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:

<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>

<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/

react-flexbox's Issues

Unknown prop warnings in React v15

React v15 has started warning about adding unknown props to DOM elements

Using react-flexbox with React v15 prints lots of warnings because props for View like auto, column, row etc. are being added as props to the underlying div. For example:

Warning: Unknown prop `auto` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div
    in View (created by Component)
...

Issues with the basic examples

Having issues with testing the basic examples

Console Log Error:

Uncaught Error: Invariant Violation: View.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

//React Base
import React from 'react/addons';
import RouteHandler from 'react-router';
import ReactDOM from 'react-dom';
import {FlexColumn, FlexRow} from 'react-flexbox';
import View from 'react-flexbox';

<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>

package.json

"dependencies": {
    "hapi": "^8.8.0",
    "material-ui": "^0.12.1",
    "moment": "^2.10.6",
    "react": "^0.13.3",
    "react-dom": "^0.14.0-rc1",
    "react-fa": "^4.0.0",
    "react-flexbox": "^3.0.0",
    "react-redux": "^3.1.0",
    "react-router": "^0.13.4",
    "react-tap-event-plugin": "^0.1.8",
    "redux": "^3.0.2",
    "request-promise": "^0.4.3",
    "socket.io": "^1.3.7",
    "socket.io-client": "^1.3.7",
    "socketcluster-client": "^2.3.11",
    "underscore": "^1.8.3",
    "winston": "^1.0.1"
  },
  "devDependencies": {
    "babel": "^5.8.23",
    "babel-core": "^5.8.25",
    "babel-loader": "^5.3.2",
    "react-hot-loader": "^1.3.0",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.12.0"
  }

Any ideas?

Some thoughts about composition

Hi! Thanks for this package - very helpful=)

I noticed that quite often I need something like that.

const orientation = {row:trueOrFalse, trueOrFalse}
const itemsOrientation = {row:trueOrFalse, column:trueOrFalse}

<View {..orientation}>
    <View {..itemsOrientation}></View>
    <View {..itemsOrientation}></View>
  </View>

As it explotates awesome feature of flexbox - you can get 4 types of items composition for free.
column list, row list, and two tables.

I think there is a potential here, what do you think?

Ability to set flex-basis

I've currently got a bug integrating this with a material-ui table. What happens is that the table stretches in width infinitely across the screen (gets capped at some very large number). If I manually set the flex-basis to a non-0 value, it fills in properly, however.

It'd be nice to be able to set a flexGrow value as a prop to account for situations like this

error when trying to use Object.assign and is not defined

console.log really annoying

For some strange reason package loaded from npm has these strings:
console.log('react render')
console.log('before')

They quickly overflow all log because they called from render method.

"undefined is not a function" on usage

Error is thrown in the autoGenerateWrapperClass function of react, on the tagName: type.toUpperCase() line.

any idea what causes this?

I've installed react-flexbox via npm, using the latest version, and I'm importing via:
View = require('react-flexbox')