https://github.com/lessmess-agency/react-media-hook

React Hook for Media Queries
https://github.com/lessmess-agency/react-media-hook

hook react

Last synced: 3 months ago
JSON representation

React Hook for Media Queries

• Host: GitHub
• URL: https://github.com/lessmess-agency/react-media-hook
• Owner: ilyalesik
• License: mit
• Created: 2019-01-09T10:16:18.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2024-03-28T18:47:57.000Z (11 months ago)
• Last Synced: 2024-04-13T13:43:36.093Z (10 months ago)
• Topics: hook, react
• Language: JavaScript
• Homepage:
• Size: 2.3 MB
• Stars: 61
• Watchers: 3
• Forks: 9
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• fucking-awesome-react-hooks - `react-media-hook`
• awesome-react-hooks-cn - `react-media-hook`
• awesome-react-hooks - `react-media-hook`
• awesome-react-hooks - `react-media-hook`

README

        
# react-media-hook

[![CircleCI](https://circleci.com/gh/ilyalesik/react-media-hook.svg?style=shield)](https://circleci.com/gh/ilyalesik/react-media-hook)

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

[![npm downloads](https://img.shields.io/npm/dt/react-media-hook.svg)](https://www.npmjs.com/package/react-media-hook)

React Hook for Media Queries. 

Uses [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) API.

## Installation

Install it with yarn:

```

yarn add react-media-hook

```

Or with npm:

```

npm i react-media-hook --save

```

## Usage

Pass query to *useMediaPredicate*:

```javascript

import React from "react";

import { useMediaPredicate } from "react-media-hook";

const Component = () => {

    const biggerThan400 = useMediaPredicate("(min-width: 400px)");

    

    return 


        {biggerThan400 && SomeButton}

    

};


```

## API

#### `useMedia(query: string)`

Returns *undefined* (for example, in Node.js environment 

where *mathMedia* is not defined), or object, simular to *mathMedia(...)* result:

```javascript

{

    matches: boolean,

    media: string

}

```

#### `useMediaPredicate(query: string)`

Returns just *true* or *false*.