@charlietango/use-media

Detect if the browser matches a media query.

Usage no npm install needed!

<script type="module">
  import charlietangoUseMedia from 'https://cdn.skypack.dev/@charlietango/use-media';
</script>

README

useMedia

Detect if the browser matches a media query.

Checkout the Storybook demo.

Installation

yarn add @charlietango/use-media

API

const matches = useMedia(query)

The query can either be a CSS media query, or an object with he media query properties.

Example

import React from 'react'
import useMedia from '@charlietango/use-media'

const Component = () => {
  const matches = useMedia({ minWidth: 768 })
  return <div>{matches}</div>
}

export default Component