use-media-query
React hook for using media query change update on react functional components. Based on useHooks.com
Installation
npm install @pijushbarik/use-media-query --save
# or
yarn add @pijushbarik/use-media-query
Example
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import useMediaQuery from "@pijushbarik/use-media-query";
function App() {
const isScreenMdOrLess = useMediaQuery(["(max-width: 768px)"], [true], false);
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Screen resolution is{" "}
<b style={{ fontSize: 34 }}>
{isScreenMdOrLess ? "less" : "greater"}
</b>{" "}
than 768px.
</p>
<p>Resize screen to see changes.</p>
</header>
</div>
);
}
export default App;