A higher-level react component to manage complex layouts using flexbox.
A higher-level react component to manage complex layouts using flexbox. Everything is just another block. Heavily inspired by Polymer layout.html, LayoutJS and the CSSinJS pattern.
Just pure layout, No more, No less.
React blocks uses a declarative approach to build complex layouts on top of CSS Flexbox. Flexbox properties are exposed as attributes on a higher-level react component. Supports media-queries via predefined mobile-first queries. Further custom media queries can be specified in a styles object. Please refer the
styles.jsfile inside
demodirectory.
Please note, it does NOT handle missing browser features. Please use Modernizr with Polyfills to achieve that.
Install via
npm. Use
--saveto include it in your package.json.
npm install react-blocks
Start by importing/requiring react-blocks within your react code.
// 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.
A block is just a block level div element by default. You can make it a flex container by adding a
layoutattribute. Further to specify a direction, add
horizontalor
verticalattributes 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
horizontalby default. The direction of a block layout can be reversed by adding a
reverseattribute. Also to make a flex-item stretch its width use the
flexattribute on a flex-item. Also all flex-items of a block container are wrapped by default.
// Normal Flex layout const App = () => { return (AlphaBeta); };// Reverse Flex layout const Reverse = () => { let { reverse } = styles; return (
AlphaBeta); };
By default flex-items stretch to fit the cross-axis and are start justified. The
alignand
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
Blockelement.
// 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.
// 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
centeredattribute.
const Centered = () => { let { centered } = styles; return (Centered); };
Blocks can further be nested. A block could contain multiple blocks as well. Use the
layoutattribute 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.
const Nested = () => { return ( Alpha Beta GammaDeltaTheta) };
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: absoluteand sets
top:0;right:0;bottom:0;left:0. Note: When using
absoluteattribute, there must be a container having
position: relativelayout.
Feel free to contribute. Submit a Pull Request or open an issue for further discussion.
MIT © whoisandie