Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

breakpoint-observer

1.5.0 • Public • Published

breakpoint-observer

version code size dependencies devDependencies

A React Component for rendering based on breakpoints.

Usage

breakpoint-observer works via the React Context, or a callback function. Simply render <BreakpointObserver.Provider /> at the top-level of your application and listen to changes via some state like redux, or with the <BreakpointObserver.Consumer />.

Context

Import BreakpointObserver.Provider as a React component and wrap it around some content. Somewhere lower in the React tree, use the BreakpointObserver.Consumer with a child function that receives the current breakpoint, and its minWidth (number) and maxWidth (number), from the specified breakpoint object. These values can be used for anything, for example conditional rendering of different child components!

import * as BreakpointObserver from 'breakpoint-observer';
 
...
 
const CurrentBreakpoint = () => (
  <BreakpointObserver.Consumer>
    {({ breakpoint, maxWidth, minWidth } ) => <p>The current breakpoint is {breakpoint}!</p>}
  </BreakpointObserver.Consumer>
);
 
...
 
ReactDOM.render(
  <BreakpointObserver.Provider
    breakpoints={{ mobile: 0, tablet: 768, desktop: 1280 }}
    defaultBreakpoint="desktop"
  >
    <CurrentBreakpoint />
  </BreakpointObserver.Provider>,
  document.body
);

Callback Function

Import BreakpointObserver as a React component and give it a callback function via the onChange prop. The function will receive the current breakpoint like the BreakpointObserver.Consumer.

import BreakpointObserver from 'breakpoint-observer';
 
const myCallback = ({ breakpoint, maxWidth, minWidth }) =>
    console.log(`The current breakpoint is ${breakpoint}!`);
 
...
 
ReactDOM.render(
  <BreakpointObserver
    breakpoints={{ mobile: 0, tablet: 768 }}
    onChange={myCallback}
    defaultBreakpoint={'tablet'}
  />,
  document.body
);

SSR

For server-side rendering a defaultBreakpoint prop is supported. This value is returned when there is no window to calculate actual breakpoints from.

Functionality

This component uses the window.matchMedia functionality to calculate the current breakpoint. For a list of breakpoints, we generate some css media queries in the form of (min-width: XXXpx) and (max-width: YYYpx) and then add listeners for the changes. <BreakpointObserver /> will then update its state when the breakpoint changes from one rule to another.

Developing

This project is built with Typescript. A Storybook is included for local previewing. The easiest way to get started is cloning the repo and starting the storybook server locally via npm start.

install

npm i breakpoint-observer

Downloadsweekly downloads

219

version

1.5.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability