React Matches 🔥

Simple helper components to make responsive design easier in React.

Install

yarn add react-matches

npm install react-matches --save

Example Usage

import { Media, Container } from 'react-matches'

const queries = {
  sm: {
    maxWidth: 400
  },
  md: {
    minWidth: 600
  },
  lg: {
    minWidth: 960
  }
}

const ResponsiveMediaComponent = () => (
  <Media queries={queries}>
    {({ matches, resolve }) =>
      <Row>
        <Column size={resolve({ sm: 12, md: 6, lg: 4 })}>
         ...
        <Column size={resolve({ sm: 12, md: 6, lg: 4 })}>
        <Column>
         ,,,
        </Column>
      </Row>
    }
  <Media>
)

const ResponsiveContainerComponent = () => (
  <Container
    tag="div"
    queries={{ fullWidth: minWidth: 600 }}
  >
    {({ matches, resolve }) =>
      <Flex row={matches.fullWidth}>
        <Input
          style={
            matches.fullWidth
              ? { marginRight: 8 }
              : { marginBottom: 8 }
          }
        />
        <Submit>
      </Flex>
    }
  <Container>
)

Media

queries: PropTypes.object

Pass any valid query that you can pass to json2mq.

onUpdate: PropTypes.func

A prop callback that fires when a query has changed.

children: PropTypes.func

Children must be a function. It returns the following back:

{
  matches, // an object matching your queries shape with active queries
  resolve // an easier way to work with multiple boolean operations
}

Container

tag: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])

The tag to render. Pass any regular element props along with this. If set to false a containerRef function will be passed down that must be placed on an element ref.

queries: PropTypes.object

An object of queries using { minWidth, maxWidth, minHeight, maxHeight }.

{
  sm: { maxWidth: 399 },
  md: { minWidth: 400 },
  lg: { minWidth: 800, maxWidth: 1200 },
}

onUpdate: PropTypes.func

A prop callback that fires when a query has changed.

children: PropTypes.func

Children must be a function. It returns the following back:

{
  containerRef, // if tag is false, you must pass the containerRef down to the component you want measured
  matches, // an object matching your queries shape with active queries
  resolve // an easier way to work with multiple boolean operations
}

Running Locally

clone repo

git clone [email protected]:souporserious/react-matches.git

move into folder

cd ~/react-matches

install dependencies

yarn

run dev mode

yarn dev

open your browser and visit: http://localhost:8080/

Thank You

Huge thank you to Daiwei Lu and Michael Jackson. Most of the code in here is heavily inspired by what they have done.