react-media-hook

react-media-hook

React Hook for Media Queries. Uses matchMedia API.

Installation

Install it with yarn:

yarn add react-media-hook

Or with npm:

npm i react-media-hook --save

Usage

Pass query to useMediaPredicate:

import React from "react";
import { useMediaPredicate } from "react-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.

Sponsored