Skip to content

aarongoin/react-flex-component

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

css flexbox component for ReactJS

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published