preact-media-hook

Preact hook for media query

Usage no npm install needed!

<script type="module">
  import preactMediaHook from 'https://cdn.skypack.dev/preact-media-hook';
</script>

README

preact-media-hook

npm version npm downloads

Preact Hook for Media Queries. Uses matchMedia API.

Installation

Install it with yarn:

yarn add preact-media-hook

Or with npm:

npm i preact-media-hook --save

Usage

Pass query to useMediaPredicate:

import { Component } from "preact";
import { useMediaPredicate } from "preact-media-hook";

const Component = () => {
    const biggerThan400 = useMediaPredicate("(min-width: 400px)");

    return <div>{biggerThan400 && <button>SomeButton</button>}</div>;
};

API

useMedia(query: string)

Returns undefined (for example, in Node.js environment where mathMedia is not defined), or object, simular to mathMedia(...) result:

{
    matches: boolean,
    media: string
}

useMediaPredicate(query: string)

Returns just true or false.