Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codemonk-digital/react-responsiveness
Responsiveness in React made easy.
https://github.com/codemonk-digital/react-responsiveness
bootstrap3 bootstrap4 bootstrap5 bulma media-queries reactjs responsiveness ssr tailwindcss
Last synced: 24 days ago
JSON representation
Responsiveness in React made easy.
- Host: GitHub
- URL: https://github.com/codemonk-digital/react-responsiveness
- Owner: codemonk-digital
- License: mit
- Created: 2023-03-06T04:04:42.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-20T03:44:40.000Z (12 months ago)
- Last Synced: 2024-04-26T10:21:13.006Z (9 months ago)
- Topics: bootstrap3, bootstrap4, bootstrap5, bulma, media-queries, reactjs, responsiveness, ssr, tailwindcss
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-responsiveness
- Size: 436 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.MD
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
React 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](#how-it-works)
## Installation
#### yarn
```terminal
yarn add react-responsiveness
```
#### npm
```terminal
npm i react-responsiveness
```
## Demo
[codesandbox](https://codesandbox.io/p/sandbox/react-responsiveness-lx3789?file=/src/App.tsx).
## Usage
#### A) Add provider
Example
```tsx
import { ResponsivenessProvider, Presets } from "react-responsiveness";
function App() {
// ...
}
const WithResponsiveness = () => (
);
export default WithResponsiveness;
```
#### B) Use in any component
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_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](https://getbootstrap.com/docs/5.3/layout/breakpoints/#available-breakpoints) preset.
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](https://github.com/codemonk-digital/react-responsiveness/issues) or a PR.
- If you spot any inaccuracy in [presets](https://github.com/codemonk-digital/react-responsiveness/blob/main/lib/presets.ts) (either typo or due to library update), please, let me know, I'll correct it.
## Can I add my own intervals? Of course:
```tsx
// ...
```
... can then be used as:
```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 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:
```ts
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.
## How it works:
- uses the native [`window.matchMedia(queryString)`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) 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 method
## Is the package working well for you?
- star the repo
- help [this answer](https://stackoverflow.com/a/76999879/1891677) get higher in the list
## Got issues?
[Let me know!](https://github.com/codemonk-digital/react-responsiveness/issues)