Media-queries-min NPM

🔀 media-queries-min

Simplest way to use media query with Child Functions and Hooks

Installation

yarn add media-queries-min

Child Function

import { MediaQuery } from 'media-queries-min'

function App() {
  // ...

  return (
    <div>
      <MediaQuery size="md">
        {({ matches }) => <>{matches ? '🎉' : '😥'}</>}
      </MediaQuery>
    </div>
  )
}

Hooks

import { useMediaQuery } from 'media-queries-min'

function App() {
  const { matches } = useMediaQuery('md')
  // ...

  return <div>{matches ? '🎉' : '😥'}</div>
}

API

useMediaQuery

const state = useMediaQuery(initialState)

state

Type: `Object`

Key	Type	Description
matches	`Boolean`	Becomes `true` when the window's size matches.

initialState

Default: `xs`

Type: `<String,Object>`

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<size, maxWidth, minWidth>`	Provide with the following values `{ size: , maxWidth: 400 , minWidth: 500 }`

MediaQuery

<MediaQuery {...props}>{(state) => {}}</MediaQuery>

state

Type: `Object`

Key	Type	Description
matches	`Boolean`	Becomes `true` when the window's size matches.

Props

Key/Type: `size=<String>`

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=<String,Number>`

<MediaQuery maxWidth={'30vw'}>{(state) => {}}</MediaQuery>

Key/Type: `minWidth=<String,Number>`

<MediaQuery minWidth={'20vw'}>{(state) => {}}</MediaQuery>

Templates

Tag: emerald-ui

import { MediaQuery } from 'media-queries-min/lib/emerald-ui'

function App() {
  return (
    <div>
      <MediaQuery size="xs">
        {({ matches }) => <> {matches ? '🎉 ' : '😥'} </>}
      </MediaQuery>
    </div>
  )
}

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`