useMediaMatch

About

Signal whether or not a media query is currently matched.

Examples

import "./styles.css";
import { useMediaMatch } from "rooks";

function App() {
  const Component = useMediaMatch("(max-width: 600px)");

  return (
    <div>
      <h1>Rooks : useMediaMatch example</h1>
      <hr></hr>

      <div
        style={{
          backgroundColor: "lightblue",
          width: "100%",
          height: "100vh",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <span>Your screen is {Component ? "narrow" : "wide"}</span>
      </div>
    </div>
  );
}

export default App;

Arguments

Argument valueTypeDescription
querystringThe media query to signal on. Example, "print" will signal true when previewing in print mode, and false otherwise

Returns

Return valueTypeDescription
isMatchBooleanWhether or not the media query is currently matched

Join the community!

Join our discord server! You can click the floating discord icon at the bottom right of the screen and chat with us!

Powered by vercel