Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/clouby/media-queries-min
⦿ - Simplest way to match media queries using Child Functions and Hooks.
https://github.com/clouby/media-queries-min
hooks media-queries react
Last synced: about 2 months ago
JSON representation
⦿ - Simplest way to match media queries using Child Functions and Hooks.
- Host: GitHub
- URL: https://github.com/clouby/media-queries-min
- Owner: clouby
- Created: 2021-02-06T03:56:45.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-04-06T14:27:36.000Z (almost 4 years ago)
- Last Synced: 2024-10-18T07:05:02.151Z (3 months ago)
- Topics: hooks, media-queries, react
- Language: JavaScript
- Homepage:
- Size: 1.32 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🔀 media-queries-min
> Simplest way to use media query with Child Functions and Hooks
## Installation
```
yarn add media-queries-min
```
## Child Function
```javascript
import { MediaQuery } from 'media-queries-min'
function App() {
// ...
return (
{({ matches }) => <>{matches ? '🎉' : '😥'}>}
)
}
```
## Hooks
```javascript
import { useMediaQuery } from 'media-queries-min'
function App() {
const { matches } = useMediaQuery('md')
// ...
return
{matches ? '🎉' : '😥'}
}
```
## API
### useMediaQuery
```js
const state = useMediaQuery(initialState)
```
#### state
##### Type: `Object`
| Key | Type | Description |
| ------- | :-------: | ---------------------------------------------- |
| matches | `Boolean` | Becomes `true` when the window's size matches. |
#### initialState
##### Default: `xs`
##### Type: ``
| Key | Type | Description |
| ------ | :--------------------------------: | ----------------------------------------------------------------------------- |
| xs | `string` | Assign a new value query to `<= 576px`. |
| sm | `string` | Assign a new value query to `>= 576px`. |
| md | `string` | Assign a new value query to `>= 768px`. |
| lg | `string` | Assign a new value query to `>= 992px`. |
| xl | `string` | Assign a new value query to `>= 1200px`. |
| params | `Object` | Provide with the following values `{ size: , maxWidth: 400 , minWidth: 500 }` |
### MediaQuery
```js
{(state) => {}}
```
#### state
##### Type: `Object`
| Key | Type | Description |
| ------- | :-------: | ---------------------------------------------- |
| matches | `Boolean` | Becomes `true` when the window's size matches. |
#### Props
##### Key/Type: `size=`
###### Default: `xs`
| Key | Type | Description |
| --- | :------: | --------------------------------------- |
| xs | `string` | Assign a new value query to `<= 576px` |
| sm | `string` | Assign a new value query to `>= 576px` |
| md | `string` | Assign a new value query to `>= 768px` |
| lg | `string` | Assign a new value query to `>= 992px` |
| xl | `string` | Assign a new value query to `>= 1200px` |
##### Key/Type: `maxWidth=`
```js
{(state) => {}}
```
##### Key/Type: `minWidth=`
```js
{(state) => {}}
```
---
### Templates
Tag: `emerald-ui`
```javascript
import { MediaQuery } from 'media-queries-min/lib/emerald-ui'
function App() {
return (
{({ matches }) => <> {matches ? '🎉 ' : '😥'} >}
)
}
```
###### Default: `xs`
| Key | Type | Description |
| --- | :------: | --------------------------------------- |
| xs | `string` | Assign a new value query to `<= 480px` |
| sm | `string` | Assign a new value query to `>= 768px` |
| md | `string` | Assign a new value query to `>= 992px` |
| lg | `string` | Assign a new value query to `>= 1200px` |
## Contribution
All the feedbacks/issues are very welcome! 😄
Please, contact me if any update about this repo [@clouby](https://github.com/clouby)