reflay: React Flexbox Layout

reflay: React Flexbox Layout is a set of React components that implements CSS3 Flexbox and are inspired by the awesome Angular Material library. It's built with ES6, SASS and WebPack and provides sugar to enable developers to more easily create modern, responsive layouts on top of CSS3 Flexbox.

Reflay has 2 main React components: Layout and Box. Using these components props as the API provides an easy way to set value (eg. direction='row') and helps with separation of concerns: Attributes in form of React props define layout, while CSS classes assign styling.

• Documentation and Demos: https://beplus.github.io/reflay (still work in progress)
• Example usage: https://github.com/beplus/reflay-example

Usage

The recommended way to use the library is to integrate it to your WebPack workflow with Babel Loader, CSS Loader and SASS Loader. A good starting point is reflay-example.

Example

Take a look at the official example of using reflay in the reflay-example repository.

Installation and Usage

To install the stable version:

npm install --save reflay

This assumes you are using npm as your package manager.

Once you have the WebPack workflow ready, you can just require and use the components:

import React from 'react'
import { Layout, Box } from 'reflay'
 
// Do not forget to load SCSS style 
import 'reflay/lib/styles/layout.scss' 
 
React.render(<Layout direction='column' />, document.querySelector('#root'))

API

Layout Component

Prop	Allowed values	Default value --	Breakpoint specific*
direction	row or column	row	Yes
align	`start	center	end
fill	bool		No
wrap	bool		No
nowrap	bool		No
margin	bool		No
padding	bool		No

• direction - specifies the Layouts direction.
• align - specifies how Box children will be aligned inside the Layout container.
• fill - forces the Layout element to fill its parent container.
• wrap - allows Box children to wrap within the Layout container.
• nowrap - do not allow Box children to wrap within the Layout container.
• margin - adds margin around each Box child.
• padding - adds padding inside each Box child.

Box Component

Prop	Allowed values	Breakpoint specific*
flex	integer (increments of 5 for 0% -> 100%, 100%/3)	Yes
order	integer (values from -20 to 20)	Yes
offset	integer (increments of 5 for 0% -> 95%, 100%/3)	Yes
hide	bool	Yes
show	bool	Yes

• flex - defines how the Box element will adjust its size with respect to its parent Layout container and the other elements within the container.
• order - sets Box order position within the Layout container.
• offset - sets Box offset percentage within the Layout container.
• hide - hide the Box elements - responsively with the use of Breakpoint specific aliases.
• show - show the Box elements - responsively with the use of Breakpoint specific aliases.

* Breakpoint specific: These Props can be used in combination with the following Responsive UI Breakpoints:

Breakpoint	MediaQuery (pixel range)
xs	'(max-width: 599px)'	extra small
gt-xs	'(min-width: 600px)'	greater than extra small
sm	'(min-width: 600px) and (max-width: 959px)'	small
gt-sm	'(min-width: 960px)'	greater than small
md	'(min-width: 960px) and (max-width: 1279px)'	medium
gt-md	'(min-width: 1280px)'	greater than medium
lg	'(min-width: 1280px) and (max-width: 1919px)'	large
gt-lg	'(min-width: 1920px)'	greater than large
xl	'(min-width: 1920px)'	extra large

resulting in the following props (just a few examples):

• direction-xs='row' - specify row direction for xs viewport.
• direction-gt-xs='column' - specify column direction for gt-xs viewport.
• align-sm='start start' - start start align type for sm viewport.
• align-gt-sm='start end' - start end align type for gt-sm viewport.
• flex-md={50} - 50 % size of the parent container for md viewport.
• flex-gt-md={75} - 75 % size of the parent container for gt-md viewport.
• order-lg={1} - specify order value of 1 for lg viewport.
• order-gt-lg={2} - specify order value of 2 for gt-lg viewport.
• offset-md={10} - set 10 % offset for md viewport.
• offset-gt-md={5} - set 5 % offset for gt-md viewport.
• hide-sm - hide the Box element for sm viewport.
• hide-gt-sm - hide the Box element for gt-sm viewport.
• show-xs - show the Box element for xs viewport.
• show-gt-xs - show the Box element for gt-xs viewport.

Code Snippets

import React from 'react'
import { Layout, Box } from 'reflay'
 
// Do not forget to load SCSS style 
import 'reflay/lib/styles/layout.scss' 
 
// 3 identical sized boxes appear next to each other on devices with viewport of `960px` min.
// 4 boxes stretched in width apper below each other on devices with viewport of `959px` max.
 
const ResponsiveComponent = () => (
  <Layout direction='column' direction-gt-sm='row' align='start stretch' align-gt-sm='center start'>
    <Box flex={100} flex-gt-sm={33} order={1}>
      Box #1 - still visible
    </Box>
    <Box flex={100} flex-gt-sm={33} order={2}>
      Box #2 - still visible
    </Box>
    <Box flex={100} flex-gt-sm={33} order={3}>
      Box #3 - still visible
    </Box>
    <Box flex={100} hide-gt-sm order={-1}>
      Box #4 - shown as first and only on devices with up to small viewport size.
    </Box>
  </Layout>
)
 
export default ResponsiveComponent

Contributors

• Igor Lamoš

License

Copyright © 2016 BePlus s.r.o.

Licensed under the MIT License.

Give us a star if reflay provides you some value.