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> | NameTypeDefaultOne OfdirectionString'row''row''row-reverse''column''column-reverse'wrapString'wrap''nowrap''wrap''wrap-reverse'justifyContentString'flex-start''flex-start''flex-end''center''space-between'alignContentString'flex-start''flex-start''flex-end''center''space-between''space-around''space-evenly''stretch'alignItemsString'flex-start''flex-start''flex-end''center''baseline''stretch' | | <Column> | NameTypeDefaultxsNumber12smNumber12mdNumber12lgNumber12xlNumber12

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