@artifak/usematchmedia

A React hook for matching media queries.

Usage no npm install needed!

<script type="module">
  import artifakUsematchmedia from 'https://cdn.skypack.dev/@artifak/usematchmedia';
</script>

README

`@artifak/usematchmedia`

A React hook that allows you to perform media queries within your React component.

Installation

Yarn

yarn add @artifak/usematchmedia

NPM

npm install @artifak/usematchmedia

Usage

import { useMatchMedia } from 'artifak';
import { ExampleMobile } from './ExampleMobile';
import { ExampleDesktop } from './ExampleDesktop';

export function Nav() {
  const matchedMobile = useMatchMedia('(hover: none)');

  return (
    <>
      {matchedMobile && <ExampleMobile />}
      {!matchedMobile && <ExampleDesktop />}
    </>
  );
}