react-flexr

Flexr

React Flexbox grid made simple. Based on the "Solved-by-flexbox"-grid

Usage

Base example.

import React from 'react';
import { Grid, Cell } from 'react-flexr';
import 'react-flexr/styles.css'

class Example extends React.component {
  render() {
    return (
      <Grid>
        <Cell>1/3<Cell>
        <Cell>1/3<Cell>
        <Cell>1/3<Cell>
      </Grid>
    );
  }
}

*If you don't use webpack with css-loader, make sure to include the react-flexr/styles.css somewhere in your project.

For more advanced use cases, the Stilr stylesheet is also exposed.*

Cell sizes can be controlled with fractions.

import React from 'react';
import { Grid, Cell } from 'react-flexr';

class Example extends React.component {
  render() {
    return (
      <Grid>
        <Cell size='6/12'>
          Fills Half
        <Cell>

        <Cell>
          Fills Rest.. (Yay for Flexbox)
        </Cell>

        <Cell size='3/12'>
          Fills a quarter
        <Cell>

        <Cell palm='3/12' lap='1/2'>
          Fills on mobile, half on lap and dynamic size everywhere else.
        <Cell>

        <Cell palm='hidden' size='1/2'>
          Hidden on palm, half width otherwise
        <Cell>
      </Grid>
    );
  }
}

Component API:

Grid

import { Grid } from 'react-flexr';

<Grid
  align={ string }    // Vertical Align Sub Cells: top, center, bottom
  hAlign={ string }   // Horizontal Align Sub Cells: left, center, right
  gutter={ string }   // Override default gutter: '1em', '5%', '10px', etc.
  Propagates downwards. Cells inside this Grid component will use the same gutter.
  flexCells={ bool }  // All sub cells will be full height
/>

Cell

import { Cell } from 'react-flexr';

<Cell
  align={ string }    // Vertical Align This Cell: top, center, bottom
  gutter={ string }   // Override default gutter: '1em', '5%', '10px', etc.
  flex={ bool }       // Like flexCells above, but for a single cell.
  size={ string }     // Takes a fraction. e.g. 1/6
  palm={ string }     // Like size, but only applies for palm devices.*
  lap={ string }      // Like size, but only applies for lap devices.*
  portable={ string } // Like size, but only applies for ( palm + lap )
  devices.*
  desk={ string }     // Like size, but only applies for desk devices.*
/>

* Ergonomic breakpoints accepts 'hidden' as well. This will prevent the component from being rendered in that state.

See the example folder for more examples.

Responsive Props

The responsive props are based on ergonomics.

I've used these breakpoints in a variety of apps and grids with success. So far the following breakpoints have beeen implemented:

• Palm
• Lap
• Portable
• Desk

See breakpoints file for sizes.

Flexr Helpers

Use these to get the most out of Flexr.

string|false findMatch(string arguments)

This is the internal function that Flexr uses to check which ergonomic state it's currently in. It's usefull if you have components outside the grid that you want to show/hide/manipulate props.

Example

import { findMatch } from 'react-flexr';
import React from 'react';

class App extends React.Component {
  render() {
    const isPalm = findMatch('palm');

    if (isPalm) console.log( 'only logged in palm' );

    return (
      <div>
        <h1>Only visible in palm:</h1>
        { isPalm
          ? <h2>Palm</h2>
          : null }

        <h1>Allows Multiple Matches</h1>
        { findMatch('desk', 'lap')
          ? <h2>Lap or Desk</h2>
          : null }
      </div>
    );
  }
}

setBreakpoints( array breakpoints )

It's posible to force flexr to be in a specific ergonomic state. This is primarily usefull when rendering on the server. E.g. looking at the user agent string on rendering the app in palm/portable if it's an iOS/iPhone or lap/portable if iOS/iPad.

Example

import { setBreakpoints } from 'react-flexr';
import App from '../your-app';
import React from 'react';

const isMobile = /iP(hone|od)|Mobile/;
function (req, res) {
  if ( isMobile.test( req.headers['user-agent'] ) ) {
    setBreakpoints(['palm', 'portable'])
  }
  else {
    setBreakpoints(['desk'])
  }
  const html = React.renderToString( <App />);

  res.send( '<!doctype html>' + html );
}

array|false findBreakpoints()

Force flexr to find the current breakpoints. Returns an array of the current breakpoints that flexr matches in. If they haven't changed since the last time findBreakpoints() was called, false will be returned. Use in combination with optimizedResize.

Example

import { findBreakpoints } from 'react-flexr';

// First run. Window is sized to match lap.
findBreakpoints()       // => ['lap', 'portable'];

// Second run. Window not resized.
findBreakpoints()       // => false;

optimizedResize.init( function )

Simple resize event throttler. Usefull for force updating when the app have been resized. For best performance, use it in your main app component in the componentDidMount life cycle.

Example

import React from 'react';
import { optimizedResize, findBreakpoints } from 'react-flexr';

class App extends React.Component {
  componentDidMount() {
    optimizedResize.init( () => {
      if ( findBreakpoints() ) {
        console.log('New Breakpoints');
        this.forceUpdate();
      }
    });
  }
}

array getCurrentBreakpoints()

returns an array of current breakpoints.

Map stylesheet

The internal Stilr stylesheet used to handle basic flexbox styling for the components. Usefull if you need full controll of how the CSS is rendered. Reed the Stilr documentation on how to use Stilr if you need finegrained controll over you styling.

palm, lap, portable, desk

The ergonomic breakpoint media queries that flexr uses internally is also exposed. These are especially useful in combination with Stilr.

Example

import { palm, lap } from 'react-flexr';
import StyleSheet from 'stilr';

console.log(palm)       // => '@media screen and (max-width: 600px)';


// Stilr usage:
const styles = Style.create({
  constainer: {
    color: 'tomato',
    fontSize: 10,
    [palm]: {
      fontSize: 20,
      color: '#fff'
    },
    [lap]: {
      color: '#000',
      width: 200
    }
  }
});

Changelog

2.0.0

• [Breaking Change]

  • Context rendering removed. Use setBreakpoints instead.

  • react-style removed. Stilr is now handling base styles. See updated readme for more information on how to include basic styling for flexr. (tl;dr get css at react-flexr/styles.css)

  • [Internal]

    • Simplified file structure.

  • [New Features]

    • findMatch
    • setBreakpoints
    • getBreakpoints
    • findBreakpoints
    • optimizedResize

  • [Bug Fix]

    • gutter is now properly propagated downwards to child Cell components if set on Grid component.

  • [Documentation]

    • Documentation greatly improved.
    • Added Changelog!