React Responsive Layout

A library of layout components designed to enable container queries without JavaScript.

⚠️ Note: This library is still in alpha, expect breaking changes.

Motivation

CSS media queries let us build responsive layouts by applying different styles at different window breakpoints. However, in component based UIs, it is often useful to apply styles based on the width of the parent container so that the component can be used in different contexts.

CSS doesn't yet have support for container queries (media queries that operate at the component level). There are many libraries which attempt to fill this shortcoming but they typically rely on JavaScript DOM events which can be slow.

This library allows you to use container queries without JavaScript enabled by transforming container queries into native CSS media queries.

Install

yarn add react-responsive-layout

Usage

In order to generate accurate media queries, all horizontal spacing must be applied by the components in this library and the root element must span the full width of the browser viewport.

The components rely on a CSS-in-JS library of your choosing. You must provide a function which generates a class name based on an object of styles.

Example using emotion

import ReactDOM from 'react-dom'
import React from 'react'
import { css } from 'emotion'
import {
  Belt,
  Columns,
  CSSProvider,
  useMediaQuery,
} from 'react-responsive-layout'

const createStyles = mq => css`
  background-color: red;
  height: 100px;
  padding: 10px;

  ${mq} {
    background-color: lime;
  }
`

const MyResponsiveComponent = () => {
  const mq = useMediaQuery(200)

  return <div className={createStyles(mq)}>Hello</div>
}

const notches = [
  { width: 850, fluid: true },
  { width: 1000, fluid: false },
  { fluid: false },
]

const App = () => (
  <CSSProvider value={{ css }}>
    <Belt notches={notches}>
      <Columns
        columns={[
          { type: 'ratio', value: 1 },
          { type: 'ratio', value: 2 },
          { type: 'ratio', value: 1 },
        ]}
        gap={10}
      >
        <MyResponsiveComponent />
        <MyResponsiveComponent />
        <MyResponsiveComponent />
      </Columns>
    </Belt>
  </CSSProvider>
)

ReactDOM.render(<App />, document.getElementById('root'))

This will render 3 columns with the middle column being twice as wide as the other two. At different window widths, the following will be rendered:

Below 420px

Between 820px and 420px

Above 820px

Components

Columns

Props

Name	Type	Default	Description
columns	`Array<{type: 'ratio'	'fixed', value: number }`	Required
gap	number	0	The fixed spacing between each column and row (in pixels). Equates to grid-gap
columnGap	number	gap	The fixed spacing between each column and row (in pixels). Equates to grid-column-gap
rowGap	number	gap	The fixed spacing between each row and row (in pixels). Equates to grid-row-gap

Belt

Constrain the child component to certain widths at different breakpoints.

Props

Name	Type	Default	Description
notches	Array<{ width: number, fluid: boolean}>	Required	The widths at which the content should be constrained to.