A higher-level react component to manage complex layouts using CSS flexbox.
npm install react-blocksA higher-level react component to manage complex layouts using flexbox. Everything is just another block. Heavily inspired by [Polymer layout.html][polymer], [LayoutJS][layoutjs] and the [CSSinJS][cssinjs] pattern.
> Just pure layout, No more, No less.
styles.js file inside demo directory.Please note, it does NOT handle missing browser features. Please use [Modernizr][modernizr] with Polyfills to achieve that.
npm. Use --save to include it in your package.json.``bash`
npm install react-blocks
Start by importing/requiring react-blocks within your react code.
`js
// using an ES6 transpiler
import Block from 'react-blocks';
// not using an ES6 transpiler
var Block = require('react-blocks');
`
There's also a umd version available at lib/umd. The component is available on window.ReactBlocks.
attribute. Further to specify a direction, add horizontal or vertical attributes for row or column respectively. However the default direction would be set to vertical if nothing is specified. The horizontal attribute is optional though, a block container has its flexDirection set to horizontal by default. The direction of a block layout can be reversed by adding a reverse attribute. Also to make a flex-item stretch its width use the flex attribute on a flex-item. Also all flex-items of a block container are wrapped by default.`js
// Normal Flex layout
const App = () => {
return (
Alpha
Beta
);
};// Reverse Flex layout
const Reverse = () => {
let { reverse } = styles;
return (
Alpha
Beta
);
};
`$3
By default flex-items stretch to fit the cross-axis and are start justified. The
align and justify attributes are used to align and justify flex-items. Please note align & justify* attributes have to be declared on a parent container and has to be a Block element.`js
// Aligned and Justified blocks
const AlignedJustified = () => {
let { vertical } = styles;
return (
Alpha
Beta
);
};
`Further flex-items can be self aligned across the cross-axis using the self attribute on the flex-item itself.
`js
// Self aligned with Aligned and Justified blocks
const SelfAlignedJustified = () => {
let { vertical } = styles;
return (
Alpha
Beta
);
};
`To center align and center justify an item within a flex-container, use the
centered attribute.`js
const Centered = () => {
let { centered } = styles;
return (
Centered
);
};
`$3
Blocks can further be nested. A block could contain multiple blocks as well. Use the layout attribute on a flex item to make a it a flex-container. However its not necessary that all children inside a flex-container are wrapped inside a Block.`js
const Nested = () => {
return (
Alpha
Beta
Gamma
Delta
Theta
)
};
`$3
Blocks come with purpose attributes for basic positioning.Attribute | Result
--------- | ------
block | Assigns display: block
hidden | Assigns display: none
invisible | Assigns visibility: hidden
relative | Assigns position: relative
absolute | Assigns position: absolute and sets top:0;right:0;bottom:0;left:0. Note: When using absolute attribute, there must be a container having position: relative` layout.[polymer]: https://www.polymer-project.org/0.5/docs/polymer/layout-attrs.html
[layoutjs]: https://github.com/basarat/layoutjs
[cssinjs]: https://speakerdeck.com/vjeux/react-css-in-js
[flexbox]: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
[modernizr]: http://modernizr.com
[whoisandie]: http://whoisandie.com
[trav_img]: https://api.travis-ci.org/whoisandie/react-blocks.svg
[trav_site]: https://travis-ci.org/whoisandie/react-blocks
[npm_img]: https://img.shields.io/npm/v/react-blocks.svg
[npm_site]: https://www.npmjs.org/package/react-blocks