preact-media-hook
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

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.

Readme

Keywords

Package Sidebar

Install

npm i preact-media-hook

Weekly Downloads

169

Version

1.0.3

License

MIT

Unpacked Size

7.14 kB

Total Files

7

Last publish

Collaborators

  • marvman