react-media-breakpoints
Simple matchMedia based React component to conditionally render components based on breakpoints.
TL;DR
- ✅ No dependencies
- ✅ Small profile (4kb)
- ✅ Flexible API
- ✅ Customizable breakpoints
Installation
yarn add react-media-breakpoints
or
npm install --save react-media-breakpoints
Pre-configured Example
To use the pre-configured Breakpoints, just import and use the component. It will re-render when the matchMedia listener matches the new breakpoint.
//Import component... //Use component based on breakpoints<Breakpoint desktop= /* Render on desktop */ tablet= /* Render on tablet */ mobile= /* Render on mobile) *//> //It can also be used more generically with a render prop...<Breakpoint render= /* Conditionally render based on the render prop. Called with desktop, tablet, mobile *//> //...Or as a child function<Breakpoint> /* Conditionally render here too :) */</Breakpoint>
By default, the pre-configuration is as follows:
name | minWidth | maxWidth |
---|---|---|
mobile | none | 767px |
tablet | 768px | 1023px |
desktop | 1024px | none |
Custom Configuration Example
Breakpoints can also be configured app wide by importing the configure method at the top of your App.js(x)
//App.js; ; //Elsewhere in your app<Breakpoint customBp1= /* bp1 */ customBp2= /* bp2 */ customBp3= /* bp3 *//> <Breakpoint render= /* called with customBp1, customBp2, customBp3 etc. *//>
Note that configurations are shared across the app - it is advised to set up once and re-use these configurations across the app.
Single Query Example
Breakpoints can be used once off with a query for just the component instance. In this case, it will not use the configured breakpoints.
; <Breakpoint query="(min-width: 600px) and (max-width: 1200px)" render= { /* Called if custom query is resolved */ }/> <Breakpoint query="(min-width: 600px) and (max-width: 1200px)"> { /* Called if custom query is resolved */ }</Breakpoint>
Server Side Rendering
Using this package in a server context will result in a default breakpoint, server
, to be rendered. This allows you to specify the most expensive breakpoint to pre-render (e.g. the most amount of API calls).
//On a server;; <Breakpoint server= { /* Render a component here */ } /><Breakpoint server=MyCoolServerComponent />
Common Gotchas & FAQs
Custom config overlaps/misses pixel ranges
In this scenario, Breakpoint
will not call any render method - this is largely do to directly translating the config to media queries.