Registry / web-framework / react-flexbox

react-flexbox

library3.1.4jsnpmunverified

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.

web-framework

npm install react-flexbox

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-FLEXBOX

react-flexbox

web-frameworkjavascriptv3.1.4

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

View

✓ import View from 'react-flexbox'

✗ import { View } from 'react-flexbox'

View is the default export, not named.

View

✓ const View = require('react-flexbox')

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

CommonJS require returns the default export directly.

View (UMD)

✓ const View = ReactFlexbox.default

✗ const View = ReactFlexbox

UMD bundle exposes library as ReactFlexbox; default export is under .default.

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'));

Debug

Known issues

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

fix

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

affects: >=1.0.0 <=3.1.4

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

affects: >=1.0.0 <=3.1.4

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

affects: >=1.0.0 <=3.1.4

gotchaThe 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".

affects: >=1.0.0 <=3.1.4

Errors

Common errors & fixes

Cannot read property 'default' of undefined

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.

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

Missing npm install or wrong import path

fix

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

SyntaxError: Unexpected token import

ES6 import used without a transpiler

fix

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

Upgrade

Version history

3.1.4latest on npm

Audit

Dependencies

reactrequiredRequired peer dependency for JSX and component lifecycle

react-domrequiredRequired peer dependency for rendering in browser

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/tcoopman/react-flexbox ↗

packagehttps://www.npmjs.com/package/react-flexbox ↗