Skip to content

ilyalesik/react-media-hook

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

react-media-hook

CircleCI npm version npm downloads

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.