Now that React Hooks have been released in version 16.8, this package has been deprecated in favor of use-breakpoint. This package will continue to work, but you should upgrade to React >=16.8 and use use-breakpoint.
A React Component for rendering based on breakpoints.
The main import BreakpointObserver
listens to breakpoint changes and uses React Context to pass it to components below:
import BreakpointObserver from 'breakpoint-observer';
...
ReactDOM.render(
<BreakpointObserver
breakpoints={{ mobile: 0, tablet: 768, desktop: 1280 }}
defaultBreakpoint="desktop"
>
<App />
</BreakpointObserver>,
document.body
);
import { useBreakpoint } from 'breakpoint-observer';
...
const CurrentBreakpoint = () => {
const { breakpoint, maxWidth, minWidth } = useBreakpoint();
return <p>The current breakpoint is {breakpoint}!</p>}
};
import { withBreakpoint } from 'breakpoint-observer';
...
const CurrentBreakpoint = withBreakpoint(({ breakpoint, maxWidth, minWidth }) => (
<p>The current breakpoint is {breakpoint}!</p>}
));
import { Consumer } from 'breakpoint-observer';
...
const CurrentBreakpoint = () => (
<BreakpointObserver.Consumer>
{({ breakpoint, maxWidth, minWidth } ) => <p>The current breakpoint is {breakpoint}!</p>}
</BreakpointObserver.Consumer>
);
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
);
For server-side rendering a defaultBreakpoint
prop is supported. This value is returned when there is no window to calculate actual breakpoints from.
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.
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
.