{"id":26155,"library":"react-flexbox","title":"react-flexbox","description":"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.","status":"maintenance","version":"3.1.4","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/tcoopman/react-flexbox","tags":["javascript","react","react-component","flexbox"],"install":[{"cmd":"npm install react-flexbox","lang":"bash","label":"npm"},{"cmd":"yarn add react-flexbox","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-flexbox","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for JSX and component lifecycle","package":"react","optional":false},{"reason":"Required peer dependency for rendering in browser","package":"react-dom","optional":false}],"imports":[{"note":"View is the default export, not named.","wrong":"import { View } from 'react-flexbox'","symbol":"View","correct":"import View from 'react-flexbox'"},{"note":"CommonJS require returns the default export directly.","wrong":"const { View } = require('react-flexbox')","symbol":"View","correct":"const View = require('react-flexbox')"},{"note":"UMD bundle exposes library as ReactFlexbox; default export is under .default.","wrong":"const View = ReactFlexbox","symbol":"View (UMD)","correct":"const View = ReactFlexbox.default"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport View from 'react-flexbox';\n\nconst App = () => (\n  <View row>\n    <View auto column>\n      <View width=\"100px\"><div className=\"red\">Left</div></View>\n      <View width=\"100px\"><div className=\"red\">Right</div></View>\n    </View>\n    <View row className=\"green\">Main content</View>\n  </View>\n);\n\nReactDOM.render(<App />, document.getElementById('root'));","lang":"javascript","description":"Creates a row layout with two columns on the left (auto width) and a main content area on the right."},"warnings":[{"fix":"Replace <FlexRow> with <View row> and <FlexColumn> with <View column>.","message":"FlexRow and FlexColumn are deprecated; use View with 'row' or 'column' props instead.","severity":"deprecated","affected_versions":">=1.0.0 <=3.1.4"},{"fix":"Ensure your webpack/babel config includes @babel/preset-env or similar.","message":"The package does not ship a transpiled version—you must use an ES6-to-ES5 transpiler (e.g., Babel) in your build pipeline.","severity":"gotcha","affected_versions":">=1.0.0 <=3.1.4"},{"fix":"Use width=\"100px\" for absolute units or width={2} for flex-grow; do not mix types.","message":"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.","severity":"breaking","affected_versions":">=1.0.0 <=3.1.4"},{"fix":"Always pass a string, e.g., className=\"my-class\".","message":"The className prop must be a string; passing an object or array will be ignored or cause a warning.","severity":"gotcha","affected_versions":">=1.0.0 <=3.1.4"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Use <script src=\"https://unpkg.com/react-flexbox/dist/react-flexbox.js\"></script> and access ReactFlexbox.default.","cause":"UMD bundle not properly imported or script tag missing","error":"Cannot read property 'default' of undefined"},{"fix":"Run npm install react-flexbox --save and ensure import path is 'react-flexbox' (not './react-flexbox').","cause":"Missing npm install or wrong import path","error":"Module not found: Can't resolve 'react-flexbox'"},{"fix":"Add Babel to your build pipeline or use CommonJS require: const View = require('react-flexbox').","cause":"ES6 import used without a transpiler","error":"SyntaxError: Unexpected token import"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}