A React Component for rendering based on breakpoints.
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.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!
;...const CurrentBreakpoint =<BreakpointObserverConsumer><p>The current breakpoint is breakpoint!</p></BreakpointObserverConsumer>;...ReactDOM;
BreakpointObserver as a React component and give it a callback function via the
onChange prop. The function will receive the current breakpoint like the
;const myCallback =console;...ReactDOM;
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.