Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/adenekan41/use-responsive-query
🚀 An extremely powerful but easy to use hook for listening to media events in react.
https://github.com/adenekan41/use-responsive-query
media-queries react-hooks typescript utility
Last synced: 7 days ago
JSON representation
🚀 An extremely powerful but easy to use hook for listening to media events in react.
- Host: GitHub
- URL: https://github.com/adenekan41/use-responsive-query
- Owner: adenekan41
- License: mit
- Created: 2021-03-13T23:41:55.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-03-15T00:04:28.000Z (almost 4 years ago)
- Last Synced: 2024-12-18T06:23:26.614Z (11 days ago)
- Topics: media-queries, react-hooks, typescript, utility
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/use-responsive-query
- Size: 112 KB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
An extremely powerful but easy to use hook for listening to media events in React.
[](https://www.npmjs.com/package/use-responsive-query)
[](https://nodei.co/npm/use-responsive-query/)
### 🔍 [Try out the interactive Demo](https://codesandbox.io/s/use-responsive-query-1ep5q?file=/src/App.js) on codesandbox
## ⚡️About
[Use Responsive Query](https://github.com/adenekan41/use-responsive-query), An
extremely powerful but easy to use hook for listening to media events in React.
URQ create an experience of a javascript like **reactive accomodation** for your
react application.
## ✨ Features
- 🚀 Typescript support
- 📦 Light Weight ~675b (gzipped)
- 🔧 Cross platform supported
- 🙅♂️ Zero dependencies
- ✅ Fully tested and reliable
- ⚒ CommonJS, ESM & browser standalone support
## ⬇ Installing [use-responsive-query](https://github.com/adenekan41/use-responsive-query)
### Using NPM
```bash
npm i use-responsive-query
```
### Using Yarn
```bash
yarn add use-responsive-query
```
## 🛠 Usage
Getting familiar with the libary and all you need is to understand how
[media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries)
works, **URQ** is create with support and flexibility in mind, we have
ochestrated some set of standard screen sizes to make work easier for you.
Here are some few primary ranges you need to get aquantained with.
- `xs`: `320px` Extra small devices (portrait phones, less than 320px)
- `sm`: `320px` Extra small devices (portrait phones, less than 576px)
- `md`: `768px` Small devices (landscape phones, less than 768px)
- `lg`: `992px` Medium devices (tablets, less than 992px)
- `xl`: `1200px` Large devices (desktops, less than 1200px)
```jsx
import useResponsiveQuery from 'use-responsive-query';
export default function App() {
const isSmallDevices = useResponsiveQuery('md'); // Small devices (landscape phones, less than 768px)
return (
{isSmallDevices && Hello Use responsive query
}
Start hacking!!! (see changes up)
);
}
```
just like that very easy and staight forward. Easy right ?, we are also created
accomodative access for you so you can write your raw query wiht **URQ** like
this.
```jsx
import useResponsiveQuery from 'use-responsive-query';
export default function App() {
const isMin300 = useResponsiveQuery('(min-width: 300px)'); // a truthy value is called immediately our window matches this value
return (
{isMin300 && Hello Use responsive query
}
Start hacking!!! (see changes up)
);
}
```
Moreover, we call this pacakage the most flexible and easy to libary and we say
that with every use case and intent in mind, if you are wondering how you can
create your own custom config for your team here is how.
## 🔧 Creating your own config
**URQ** give you a creative option to modify your default primary media ranges
and lets you created a unique configuration access for your team.
```jsx
import useResponsiveQuery from 'use-responsive-query';
const config = {
sm: '400px',
};
export default function App() {
const isSmall = useResponsiveQuery('sm', config); // a truthy value is called immediately our window matches <400px
return (
{isSmall && Hello Use responsive query
}
Start hacking!!! (see changes up)
);
}
```
MIT © [codewonders.dev](https://codewonders.dev) · GitHub
[@adenekan41](https://github.com/adenekan41) > ·