react-responsiveness
v0.1.5TypeScript
<div class="center"> <h1>React Responsiveness</h1> </div>
reactreact responsiveness pluginresponsivenessresponsive designresponsiveness breakpointsresponsiveness intervalresponsive intervalsbreakpointscustom breakpointsmatchmedia
60/weekUpdated 2 years agoMITUnpacked: 21.1 KB
Published by andrei-gheorghiu
npm install react-responsivenessReact Responsiveness
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.
Installation
#### yarn
``terminal`
yarn add react-responsiveness
#### npm
`terminal`
npm i react-responsiveness
Demo
Usage
#### A) Add provider
Show example
`tsx
import { ResponsivenessProvider, Presets } from "react-responsiveness";
function App() {
// ...
}
const WithResponsiveness = () => (
);
export default WithResponsiveness;
`
#### B) Use in any component
Show example
`tsx
import { useResponsiveness } from "react-responsiveness";
const { isMin, isMax, isOnly, currentInterval } = useResponsiveness()
return (<>
Current interval {currentInterval}
{isMin('md') && (
// @media (min-width: 768px)
content...
)}
{isMax('md') && (
// @media (max-width: 991.9px)
content...
)}
{isOnly('md') && (
// @media (min-width: 768px) and (max-width: 991.9px)
content...
)}
)
`
Available presets:
, 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.
Show preset details
tsx
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.
Can I add my own intervals? Of course:
tsx
small: 0,
medium: 777,
large: 1234,
}}
>
// ...
`
Show usage example
tsx
import { useResponsiveness } from "react-responsiveness";const { isOnly } = useResponsiveness()
return (<>
{isOnly('medium') && (
// @media (min-width: 777px) and (max-width: 1233.9px)
content...
)}
)
`
F.A.Q.
#### My IDE's TypeScript service does not pick up the types for the package. Is there a way to fix it?
Show answer
I've noticed this weird problem in some codesandbox.io instances.
This seems to fix it:
ts
// src/react-responsiveness.d.ts
declare module "react-responsiveness" {
export * from "react-responsiveness/dist/index"
}
`
Re-exporting types from where they are declared in doesn't make much sense, but it keeps TS happy.
Another way to fix it is to restart the TS service, but it doesn't always work.
How it works:
window.matchMedia(queryString) and only reacts to changes in the query's matches value. It's the same API powering CSS media queries
- listeners are placed on the MediaQueryList instances, meaning they are garbage collected as soon as the app is unmounted, without leaving bound events behind on or window object
- 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"_ resize` event listener methodGot issues?
Happy coding!
:: }<(((*> ::