Medium #1 - Grid Example 5

Medium #1 - Grid Example 5.jsx

import React from 'react'
// Import ThemeProvider from Styled Components
import { ThemeProvider } from 'styled-components'

// The components we created in the previous step
import { Row, Column } from './Grid'

// Create a theme
const theme = {
  // Responsove Props config object
  responsiveProps: {
    breakpoints: {
      xxs: 0,
      xs: 320,
      s: 576,
      m: 768,
      l: 992,
      xl: 1200
    }
  }
}
 
//Pass the theme to Styled Components ThemeProvider
// All components enhanced with Responsive Props that are wrapped inside this provider can now target the media queries from the config above
const Example = () => (
  <ThemeProvider theme={theme}>
    <Row>
      <Column span={{ s: 6, l: 3, xl: 2 }} order={{ l: 2 }} />
      <Column span={{ s: 6, l: 3, xl: 2 }} order={{ l: 1 }} />
      <Column span={{ s: 6 }} hidden={{ l: true }} />
      <Column span={{ s: 6 }} hidden={{ l: true }} />
    </Row>
  <ThemeProvider theme={theme}>
)