https://github.com/maroun-baydoun/use-media-query

Listen to media query matches in React
https://github.com/maroun-baydoun/use-media-query

hook media-queries react responsive typescript

Last synced: 3 months ago
JSON representation

Listen to media query matches in React

• Host: GitHub
• URL: https://github.com/maroun-baydoun/use-media-query
• Owner: maroun-baydoun
• License: mit
• Created: 2020-07-31T21:56:00.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T04:52:38.000Z (over 2 years ago)
• Last Synced: 2025-03-04T04:46:59.148Z (4 months ago)
• Topics: hook, media-queries, react, responsive, typescript
• Language: TypeScript
• Homepage:
• Size: 2.06 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
## @maroun-baydoun/use-media-query

##### Listen to media query matches in React

[![npm version](https://badge.fury.io/js/%40maroun-baydoun%2Fuse-media-query.svg)](https://badge.fury.io/js/%40maroun-baydoun%2Fuse-media-query)

#### Install

```

npm i @maroun-baydoun/use-media-query

```

Or

```

yarn add @maroun-baydoun/use-media-query

```

> expects  `react >= 16.8.0` to be installed as a peer dependency.

#### Use

```ts

import useMediaQuery from "@maroun-baydoun/use-media-query";

const MyComponent = () => {

    const matches = useMediaQuery("only screen and (min-width: 1024px)");

    return matches ? "It matches!" : "No match (yet)";

}

```

#### Browser Compatibility

This library relies on the `window.matchMedia` API. Compatible browsers can be found  [here](https://caniuse.com/#feat=matchmedia "Can I use matchMedia?").