react-flexbox-view v0.1.1

React Flexbox View

A generic Flexbox based layout component for wrapping other components.

The API provides some abstractions over flexbox with readability and useability in mind, with the full power of flexbox still available if you need. A number of shortcut props have been provided that address common use cases when constructing user interfaces

View a demo here

WARNING: API is not 100% finalised yet and is subject to change

Install

npm install --save react-flexbox-view

Basic Usage

React Flexbox Grid exports a default base view component which can be used like so:

import React from 'react'
import View from 'react-flexbox-view'

const Example = () => (
  <View column fit>
    <View>Row 1</View>
    <View>Row 2</View>
    <View>Row 3</View>
  </View>
)

This will create 3 rows one below the other (as parent is column), with each row taking up full width of the container which has been set with 100% width and height via the fit prop.

Responsive Helpers

Responsive props can be set that can control what basis value is used at different breakpoints:

Responsive props accept the same values as the basis prop ie. a valid CSS length OR a fraction wich will be converted into a percentage.

Example

In the following example, Cell A will take up 100% of the width of the container at all screen sizes. Cells B and C will do the same on xs devices but on sm devices they will share the same row, each taking up half the width of the row. Cells D, E and F will each sit on their own row taking up 100% width on xs devices only, and in other scenarios will share the same row taking up a third of the width each.

<View wrap>
  <View xs={1}>Cell A</View
  <View xs={1} sm={1/2}>Cell B</View>
  <View xs={1} sm={1/2}>Cell C</View>
  <View xsOnly={1}>Cell D</View>
  <View xsOnly={1}>Cell E</View>
  <View xsOnly={1}>Cell F</View>
</View>

Spacing Helpers

A number of spacing helpers have been provided that can be used to easily set margins or padding.

Example

The following will set padding and margins of various sizes - which sizes depend on the provided mapping object in the scales prop. A boolean value will use the "regular" size in the scale

<View padding>
  <View margin marginTop="large" marginBottom="large" />
</View>

If you don't like the provided scales, provide your own using the included ViewProvider component

ViewProvider

The included ViewProvider component provides a way to customize the default props for all View components nested under it. This is handy if you would like to customize some of the defaults, particularly the responsive breakpoints or spacing scales.

Example

import View, { ViewProvider } from 'react-flexbox-view'

const Example = () => (
  <ViewProvider
    breakpoints={{
      xs:0,
      sm:576,
      md:768,
      lg:992,
      xl:1200,
    }}
  >
    ...
  </ViewProvider>
)

API

Core

Positioning

Responsive Props

Spacing Helpers

Other

License

MIT