whoisandy/ react-blocks

(1.1.4) about 6 years ago

JavaScript

CSS

Need help with react-blocks?

Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

whoisandy

481 Stars

34 Forks

MIT License

129 Commits

5 Opened issues

Description

A higher-level react component to manage complex layouts using flexbox.

Services available

Need anything else?

Contributors list

Readme

React Blocks

Name: react-blocks
Brand: react-blocks
SKU: //whoisandy/react-blocks
Rating: 2.9525 (481 reviews)

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.

About

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.js

file inside

demo

directory.

Please note, it does NOT handle missing browser features. Please use Modernizr with Polyfills to achieve that.

Usage

NPM and Webpack/Browserify

Install via

npm

. Use

--save

to 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

Layout (Horizontal, Vertical, Reverse, Wrap)

A block is just a block level div element by default. You can make it a flex container by adding a

layout

attribute. Further to specify a direction, add

horizontal

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.

// Normal Flex layout
const App = () => {
  return (
    
      Alpha
      Beta
    
  );
};

// Reverse Flex layout
const Reverse = () => {
  let { reverse } = styles;
  return (
    
      
Alpha
      Beta
    
  );
};

Align, Self-Align & Justify

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.

// 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

centered

attribute.

const Centered = () => {
  let { centered } = styles;
  return (
    
      Centered
    
  );
};

Nested Blocks

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.

const Nested = () => {
  return (
    
      
        Alpha
        Beta
      
      
        Gamma
        Delta
        Theta
      
    
  )
};

General purpose attributes

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.

Todo

Add vendor prefixes
Ability to define custom media-queries

Issues

Feel free to contribute. Submit a Pull Request or open an issue for further discussion.