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 | The proportions to render each column. Equates to grid-template-columns. | | 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. |