react-flexbox-slim

react-flexbox-slim

Customizable flexbox grid system for React

• Installation
• Import Information
• Defaults
• Examples
• Components and Properties

Installation

npm install --save react-flexbox-slim

Important Information

• 12 column grid system by default
• Utilizing the <Grid> component/wrapper, you can fully customize the grid system (number of columns and breakpoints)
• The <Grid> component uses the Context API to pass down any customization
• See the examples for more information
• We provide esm and umd modules
  • By default, esm is imported
  • To import umd use:

  const { Row, Column } = require('react-flexbox-slim/lib/bundle.umd.js')
  

Defaults

// breakpoints
{
  xs: '0px',
  sm: '540px',
  md: '768px',
  lg: '992px',
  xl: '1200px',
}

// maxColumns
12

Examples

// Basic 12 column grid system, using defaults
<Row justifyContent='center'>
  <Column xs={12} sm={4} md={6} lg={6} xl={3}>
    <p>Hello,</p>
  </Column>
  <Column xs={12} sm={4} md={6} lg={6} xl={3}>
    <p>World!</p>
  </Column>
</Row>

// Customized grid system
const customBreakpoints = {
  xs: '0px',
  sm: '500px',
  md: '800px',
  lg: '1000px',
  xl: '1600px',
};

const customMaxColumns = 16;

<Grid breakpoints={customBreakpoints} maxColumns={customMaxColumns}>
  <Row justifyContent='center'>
    /* Now you can use 16 column grid system */
    <Column xs={16} sm={4} md={6} lg={6} xl={3}>
        <p>Hello,</p>
    </Column>
    <Column xs={16} sm={4} md={6} lg={6} xl={3}>
        <p>World!</p>
    </Column>
  </Row>
</Grid>

Components and Properties

Component	Props
<Grid>	See here for Grid props
<Row>	Name Type Default One Of direction String 'row' 'row' 'row-reverse' 'column' 'column-reverse' wrap String 'wrap' 'nowrap' 'wrap' 'wrap-reverse' justifyContent String 'flex-start' 'flex-start' 'flex-end' 'center' 'space-between' alignContent String 'flex-start' 'flex-start' 'flex-end' 'center' 'space-between' 'space-around' 'space-evenly' 'stretch' alignItems String 'flex-start' 'flex-start' 'flex-end' 'center' 'baseline' 'stretch'
<Column>	Name Type Default xs Number 12 sm Number 12 md Number 12 lg Number 12 xl Number 12

Grid Props

Name	Type
breakpoints	Object (see below for shape)
maxColumns	Number

• breakpoints

If you wish to only change a single breakpoint value, you may do so. We will combine the default breakpoint values with the object you supplied

Note: this may cause issues with media queries

// breakpoints prop must be of the following shape:
<Grid 
  breakpoints={{
    xs: String,
    sm: String,
    md: String,
    lg: String,
    xl: String
  }}
>

• maxColumns

Allows you to specify the number of columns for the entire grid system

<Grid maxColumns={16}>