What - Tiny plugin for working with responsiveness intervals, developed with a focus on ease of use (DX) and runtime performance.
Why - I am a bit obsessed with both performance and ease of use. See how it works
yarn add react-responsiveness
npm i react-responsiveness
Example
import { ResponsivenessProvider, Presets } from "react-responsiveness";
function App() {
// ...
}
const WithResponsiveness = () => (
<ResponsivenessProvider breakpoints={Presets.Bootstrap_5}>
<App />
</ResponsivenessProvider>
);
export default WithResponsiveness;Example
import { useResponsiveness } from "react-responsiveness";
const { isMin, isMax, isOnly, currentInterval } = useResponsiveness()
return (<>
<div>Current interval {currentInterval}</div>
{isMin('md') && (
// @media (min-width: 768px)
<div>content...</div>
)}
{isMax('md') && (
// @media (max-width: 991.9px)
<div>content...</div>
)}
{isOnly('md') && (
// @media (min-width: 768px) and (max-width: 991.9px)
<div>content...</div>
)}
</>)Bootstrap_3, Bootstrap_4, Bootstrap_5, Bulma, Chakra, Foundation, Ionic, Material_Design, Materialize, Material_UI, Quasar, Semantic_UI, Skeleton, Tailwind_CSS, Windi_CSS
Notes:
- Default breakpoints value is already set to Bootstrap 5's responsiveness breakpoints preset.
Preset details
Presets.Bootstrap_5 = {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
xxl: 1400,
};- If you maintain a CSS framework (or use one often) and want its preset added, open an issue or a PR.
- If you spot any inaccuracy in presets (either typo or due to library update), please, let me know, I'll correct it.
<ResponsivenessProvider
breakpoints={{
small: 0,
medium: 777,
large: 1234,
}}
>
// ...
</ResponsivenessProvider>... can then be used as:
import { useResponsiveness } from "react-responsiveness";
const { isOnly } = useResponsiveness()
return (<>
{isOnly('medium') && (
// @media (min-width: 777px) and (max-width: 1233.9px)
<div>content...</div>
)}
</>)My IDE doesn't pick up the types for the package. Is there anything I can do about it?
I've noticed this weird problem in some codesandbox.io instances.
I don't know why it happens but here's what you can do to fix it: create a react-responsiveness.d.ts file in src/ folder, with the following content:
declare module "react-responsiveness" {
export * from "react-responsiveness"
}This seems to fix TS.
Another fix which sometimes works is to re-start the TS service.
- uses the native
window.matchMedia(queryString)and only reacts to changes in the query'smatchesvalue. It's the same API powering CSS media queries - listeners are placed on the
MediaQueryListinstances, meaning they are garbage collected as soon as the app is unmounted, without leaving bound events behind on<body>orwindowobject - no global pollution
- in terms of memory and/or CPU consumption, listening to
window.matchMadia'change' events is a few hundred times lighter than using the "traditional"resizeevent listener method
- star the repo
- help this answer get higher in the list