react-flex-component

CSS Flexbox in component form for ReactJS.

Installation

npm install react-flex-component

Code Example

Simple two-piece component architecture, Box to define a flexbox space, Item to define an item within a flexbox

app.jsx

var React = require('react'),
	Flexbox = require('react-flex-component'),
	Box = Flexbox.Box,
	Item = Flexbox.Item,
	FlexableLayout = React.createClass({
		render: function() {
			return (
				<Box column justifyContent='flex-end'>
					<Item>
						<Box nowrap>
							<Item>Read me</Item>
							<Item>from left</Item>
							<Item>to right.</Item>
						</Box>
					</Item>
					<Item>I</Item>
					<Item>am</Item>
					<Item>tall.</Item>
				</Box>
			);
		}
	});

React.render(<FlexableLayout />, document.body);

To build the example in the package:

npm install

npm run example

And then simply open example/index.html to run.

Components

Box

Renders a flexbox container.

Props:

• column (boolean) creates column layout. defaults to row layout.
• nowrap (boolean) prevents wrapping, default is to wrap
• justifyContent (string) See MDN's justify-content syntax for valid values.
• alignItems (string) See MDN's align-items syntax for valid values.

Item

Renders a flexbox item.

Props:

• flex (string) See MDN's flex docs for details and valid values.
• alignSelf (string) See MDN's align-self syntax for valid values.

More

For more info on CSS flexbox check out MDN's docs.

Contributors

Aaron Goin

License

This content is released under the MIT License.