liringlas / react-match-mq

Simple media query matching component

Uses React Hooks

IE10+ because of window.matchMedia(...)

Usage:

npm i --save react-match-mq

OR

yarn add react-match-mq

Simple true/false rendering.

import { Media } from 'react-match-mq';
...
<Media query={"(min-width: 1024px)"}>
    {matches =>
        matches ? (
            "It matches!"
        ) : (
            "Doesnt match"
        )
    }
</Media>