https://github.com/whoisandy/react-blocks

A higher-level react component to manage complex layouts using flexbox.
https://github.com/whoisandy/react-blocks

Last synced: 3 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/whoisandy/react-blocks
• Owner: whoisandy
• License: mit
• Created: 2015-06-14T18:54:41.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2023-11-30T14:30:25.000Z (about 1 year ago)
• Last Synced: 2024-10-30T07:59:27.252Z (3 months ago)
• Language: JavaScript
• Homepage: http://whoisandy.github.io/react-blocks
• Size: 587 KB
• Stars: 499
• Watchers: 15
• Forks: 35
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-cn - react-blocks

README

        
# React Blocks [![NPM Package][npm_img]][npm_site] [![Travis Status][trav_img]][trav_site]

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

## About

React blocks uses a *declarative* approach to build complex layouts on top of [CSS Flexbox][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][modernizr] with Polyfills to achieve that.

## Usage

### NPM and Webpack/Browserify

Install via `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`.

### 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` 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

    

  );

};

```


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

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

    

  );

};

```


### 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*.

```js

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.

## License

MIT © [whoisandie][whoisandie]

[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