react-web-breakpoints v1.8.0

React Web Breakpoints

Responsive design based on breakpoints demo

Install

# with npm
$ npm install react-web-breakpoints --save
# or with yarn
$ yarn add react-web-breakpoints

Usage

import {
  BreakpointsProvider,
  useBreakpoints,
  withBreakpoints,
  BreakShowAt
} from 'react-web-breakpoints';

BreakpointsProvider

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BreakpointsProvider } from 'react-web-breakpoints';

const mountNode = document.getElementById("app");
ReactDOM.render(
  <BreakpointsProvider breakpoints={{ sm: 0, md: 768, lg: 1024 }}>
    <App name="User" />
  </BreakpointsProvider>
  , mountNode
);

With Hooks - useBreakpoints (it returns current breakpoint e.g. lg)

import React from "react";
import { useBreakpoints } from 'react-web-breakpoints';

const App = ({ name, media }) => {
  const media = useBreakpoints();
  return <h1>Hello {name} - Screen {media}</h1>;
};

export default App;

With HOC - withBreakpoints (wrapped component i.e. App receives new props media)

import React from "react";
import { withBreakpoints } from 'react-web-breakpoints';

const App = ({ name, media }) => {
  return <h1>Hello {name} - Screen {media}</h1>;
};

export default withBreakpoints(App);

With BreakShowAt - renders its children when current breakpoint (say lg) match with its props (i.e. md and lg)

import React from "react";
import { BreakShowAt } from 'react-web-breakpoints';

const App = ({ name }) => {
  return (
    <BreakShowAt md lg>
      <div>This content shows for md and lg screens.</div>
    </BreakShowAt>
  );
};

export default App;

BreakpointsProvider - Props

Source Code Run

Install the dependencies and devDependencies and start the server.

$ git clone git@github.com:sagarpanda/react-web-breakpoints.git
$ cd react-web-breakpoints
$ npm install
$ npm start