react-flexbox

3.1.4 verified Fri May 01 auth: no javascript maintenance

React-flexbox is a React component library (v3.1.4) that implements CSS flexbox using inline styles, providing a View component with props for row, column, auto, width, height, and className. It supports React 0.14–16 and requires an ES6 transpiler (no transpiled build included). Key differentiators: lightweight, no external CSS, and deprecated FlexRow/FlexColumn wrappers. The library is in maintenance mode with infrequent updates.

Common errors

error Cannot read property 'default' of undefined ↓

cause UMD bundle not properly imported or script tag missing

fix

Use <script src="https://unpkg.com/react-flexbox/dist/react-flexbox.js"></script> and access ReactFlexbox.default.

error Module not found: Can't resolve 'react-flexbox' ↓

cause Missing npm install or wrong import path

fix

Run npm install react-flexbox --save and ensure import path is 'react-flexbox' (not './react-flexbox').

error SyntaxError: Unexpected token import ↓

cause ES6 import used without a transpiler

fix

Add Babel to your build pipeline or use CommonJS require: const View = require('react-flexbox').

Warnings

deprecated FlexRow and FlexColumn are deprecated; use View with 'row' or 'column' props instead. ↓

fix Replace <FlexRow> with <View row> and <FlexColumn> with <View column>.

gotcha The package does not ship a transpiled version—you must use an ES6-to-ES5 transpiler (e.g., Babel) in your build pipeline. ↓

fix Ensure your webpack/babel config includes @babel/preset-env or similar.

breaking The width prop accepts both a number (flex-grow) and a string (CSS unit); using a number without a unit may yield unexpected results if you intended a CSS length. ↓

fix Use width="100px" for absolute units or width={2} for flex-grow; do not mix types.

gotcha The className prop must be a string; passing an object or array will be ignored or cause a warning. ↓

fix Always pass a string, e.g., className="my-class".

Install

npm install react-flexbox

yarn add react-flexbox

pnpm add react-flexbox

Imports

View

wrong

import { View } from 'react-flexbox'

correct

import View from 'react-flexbox'

View is the default export, not named.

View

wrong

const { View } = require('react-flexbox')

correct

const View = require('react-flexbox')

CommonJS require returns the default export directly.

View (UMD)
wrong
```
const View = ReactFlexbox
```
correct
```
const View = ReactFlexbox.default
```
UMD bundle exposes library as ReactFlexbox; default export is under .default.

Quickstart

Creates a row layout with two columns on the left (auto width) and a main content area on the right.

import React from 'react';
import ReactDOM from 'react-dom';
import View from 'react-flexbox';

const App = () => (
  <View row>
    <View auto column>
      <View width="100px"><div className="red">Left</div></View>
      <View width="100px"><div className="red">Right</div></View>
    </View>
    <View row className="green">Main content</View>
  </View>
);

ReactDOM.render(<App />, document.getElementById('root'));