https://github.com/carloluis/use-media-query-hook

react use-media-query-hook
https://github.com/carloluis/use-media-query-hook

custom-hook hooks media-query media-query-list react react-hooks

Last synced: about 4 hours ago
JSON representation

react use-media-query-hook

• Host: GitHub
• URL: https://github.com/carloluis/use-media-query-hook
• Owner: carloluis
• License: mit
• Created: 2019-02-15T22:50:39.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T17:30:50.000Z (almost 2 years ago)
• Last Synced: 2024-12-01T04:07:50.854Z (12 days ago)
• Topics: custom-hook, hooks, media-query, media-query-list, react, react-hooks
• Language: JavaScript
• Homepage: https://carloluis.github.io/use-media-query-hook/
• Size: 948 KB
• Stars: 14
• Watchers: 1
• Forks: 1
• Open Issues: 32
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• stars - use-media-query-hook - media-query-hook | carloluis | 14 | (JavaScript)
• stars - use-media-query-hook - media-query-hook | carloluis | 14 | (JavaScript)

README

        
# use-media-query-hook

> React hook to check when a media query result changes

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)

[![npm](https://img.shields.io/npm/v/use-media-query-hook.svg)](https://www.npmjs.com/package/use-media-query-hook)

[![Build Status](https://travis-ci.org/carloluis/use-media-query-hook.svg?branch=master)](https://travis-ci.org/carloluis/use-media-query-hook)

[![PeerDependencies](https://img.shields.io/david/peer/carloluis/use-media-query-hook.svg)](https://david-dm.org/carloluis/use-media-query-hook?type=peer)

[Demo page](https://carloluis.github.io/use-media-query-hook/)

## Install

```bash

yarn add use-media-query-hook

```

## Usage

```jsx

import React from 'react';

import useMediaQuery from 'use-media-query';

const App = () => {

  const isMobile = useMediaQuery('(max-width: 425px)')

  return (

    


      { isMobile ? '📱' : '💻' }

    

  );

}

```


Check MDN docs on [using media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries "Using media queries")