Miss any of our Open RFC calls?Watch the recordings here! »

react-responsive-breakpoints

3.0.1 • Public • Published

react-responsive-breakpoints

npm package node version Build Status codecov Known Vulnerabilities

Build Status

A higher-order React component to translate CSS breakpoints into properties.

Libraries like react-responsive and react-responsive-component let you specify media queries in your React code. But if you're using a responsive CSS framework like Bootstrap, Foundation, or even a homegrown one, you probably want your React components to mirror your existing CSS breakpoints without duplicating them in JavaScript.

Demo on CodeSandbox

react-responsive-breakpoints Demo

Installation

Published on npm as react-responsive-breakpoints.

npm users:

npm install --save react-responsive-breakpoints

yarn users:

yarn add react-responsive-breakpoints

react-responsive-breakpoints does not include its own version of React. It will use whatever version is already installed in your project.

Then add a DOM element for each breakpoint size in your application. Each DOM element should only appear at its respective breakpoint. For example, if your application uses Bootstrap v3.3, add responsive elements like:

<div class="visible-xs-block" id="marker-xs"></div>
<div class="visible-sm-block" id="marker-sm"></div>
<div class="visible-md-block" id="marker-md"></div>
<div class="visible-lg-block" id="marker-lg"></div>

For best results, create these responsive DOM markers outside of the React application so they are ready as soon as react-responsive-breakpoints needs them.

Usage

Use withBreakpointsCustom(options, Component) to create a higher-order component around your custom React component.

  • options (Object) - your responsive configuration options
    • options.breakpoints (Array) - An array of objects. Each object specifies a responsive breakpoint and contains two properties:
      • prop (String) - The name of the property that will be passed to Component indicating whether the breakpoint is active
      • selector (String) - A CSS selector for the DOM marker that appears at the breakpoint, e.g. "#some-id" or ".some-class"
  • Component (ReactElement) - Your React component
import React from 'react';
import { withBreakpointsCustom } from 'react-responsive-breakpoints';
 
/**
 * The "isSize*" properties will be automatically set by react-responsive-breakpoints.
 * All other properties pass through as usual.
 */
const MyComponent = ({ counter, isSizeXs, isSizeSm, isSizeMd, isSizeLg, onIncrement }) => {
    return (
        <div>
            {counter}
            <button type="button" onClick={onIncrement}>Increment</button>
            {/* Display custom content depending on the screen width */}
            {isSizeXs ? (
                <div>X-small screen content</div>
            ) : null}
            {isSizeSm ? (
                <div>Small screen content</div>
            ) : null}
            {isSizeMd ? (
                <div>Medium screen content</div>
            ) : null}
            {isSizeLg ? (
                <div>Large screen content</div>
            ) : null}
        </div>
    );
};
 
const breakpoints = [
    { prop: 'isSizeXs', selector: '#marker-xs' },
    { prop: 'isSizeSm', selector: '#marker-sm' },
    { prop: 'isSizeMd', selector: '#marker-md' },
    { prop: 'isSizeLg', selector: '#marker-lg' },
];
const MyResponsiveComponent = withBreakpointsCustom({ breakpoints }, MyComponent);

Lastly, use your new higher-order component in place of your custom component.

let x = 1;
 
function incrementCounter() {
    x++;
}
 
return (
    <MyResponsiveComponent counter={x} onIncrement={incrementCounter}>
);

License

MIT

Keywords

none

Install

npm i react-responsive-breakpoints

DownloadsWeekly Downloads

1

Version

3.0.1

License

MIT

Unpacked Size

19.2 kB

Total Files

6

Last publish

Collaborators

  • avatar