react-point-break

React CSS media queries with breakpoint render props Component and Provider.

This is a small view

• 🌓 css media queries
• 🎉 render props
• 🎁 connected via react context
• ❤️ small API
• ⭐️ server side rendering

react-point-break gives you a <Breakpoint> component and an optional <BreakpointProvider> used to listen to CSS media queries and render the matching query using render props.

Demo

Installation

With npm:

npm install react-point-break

With yarn:

yarn add react-point-break

Usage

react-point-break can be used on its own or with a provider to give your app access to the queries anywhere in the tree.

Breakpoint

Props:

• Media queries to match, the given prop name will be passed into the render prop function, for example: sm="".
• render or children: a function that will be called with the given prop names as boolean values for the queries that matches.

Note you can supply the render prop function using render or via children but not both.

import { Breakpoint } from 'react-point-break';
 
const App = () => {
  return (
    <Breakpoint
      sm="(max-width: 479px)"
      md="(min-width: 480px) and (max-width: 767px)"
      lg="(min-width: 768px)"
    >
      {({ sm, md, lg }) => {
        if (sm) {
          return <h1>This is a small view</h1>;
        }
        if (md) {
          return <h1>This is a medium view</h1>;
        }
        if (lg) {
          return <h1>This is a large view</h1>;
        }
        return <h1>Default view</h1>;
      }}
    </Breakpoint>
  )
};

BreakpointProvider

Props:

• Media queries to match, the given prop name will be passed into the render prop function of any child Breakpoint components, for example: sm="".
• children to be rendered.

import { Breakpoint, BreakpointProvider } from 'react-point-break';
 
const App = () => {
  return (
    <BreakpointProvider
      sm="(max-width: 479px)"
      md="(min-width: 480px) and (max-width: 767px)"
      lg="(min-width: 768px)"
    >
      <Header />
      <Main>
        <Breakpoint>
          {({ sm, md, lg }) => {
            if (sm) {
              return <h1>This is a small view</h1>;
            }
            if (md) {
              return <h1>This is a medium view</h1>;
            }
            if (lg) {
              return <h1>This is a large view</h1>;
            }
            return <h1>Default view</h1>;
          }}
        </Breakpoint>
      </Main>
      <Footer />
    </BreakpointProvider>
  )
};

Additional queries and overriding

Any queries supplied to the Breakpoint component will be passed down into the render prop function with the queries defined in the BreakpointProvider. If the additional queries share the same prop name as defined in the provider then they will override the matching provider query.

import { Breakpoint, BreakpointProvider } from 'react-point-break';
 
const App = () => {
  return (
    <BreakpointProvider
      sm="(max-width: 479px)"
      md="(min-width: 480px) and (max-width: 767px)"
      lg="(min-width: 768px)"
    >
      <Header />
      <Main>
        <Breakpoint
          lg="(min-width: 768px) and (max-width: 1023px)"
          xl="(min-width: 1024px)"
        >
          {({ sm, md, lg, xl }) => {
            if (sm) {
              return <h1>This is a small view</h1>;
            }
            if (md) {
              return <h1>This is a medium view</h1>;
            }
            if (lg) {
              return <h1>This is a large view</h1>;
            }
            if (xl) {
              return <h1>This is an extra large view</h1>;
            }
            return <h1>Default view</h1>;
          }}
        </Breakpoint>
      </Main>
      <Footer />
    </BreakpointProvider>
  )
};

Other solutions

• react-meida
• react-responsive
• ?

Contributors

Matt Phillips 💻 💡 🤔 🚇 ⚠️

LICENSE

MIT