https://github.com/geemanjs/use-media-size

https://github.com/geemanjs/use-media-size

Last synced: 8 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/geemanjs/use-media-size
• Owner: geemanjs
• License: mit
• Created: 2020-05-03T13:44:59.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T04:53:33.000Z (almost 2 years ago)
• Last Synced: 2024-04-25T06:20:36.132Z (7 months ago)
• Language: TypeScript
• Size: 1.59 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## useMediaSize hook

![GitHub release (latest by date)](https://img.shields.io/github/v/release/Geeman201/use-media-size?style=flat-square)

![npm](https://img.shields.io/npm/dm/use-media-size?style=flat-square)

![NPM](https://img.shields.io/npm/l/use-media-size?style=flat-square)

![GitHub watchers](https://img.shields.io/github/watchers/geeman201/use-media-size?style=social)

![GitHub stars](https://img.shields.io/github/stars/Geeman201/use-media-size?style=social)

### Installation

```

npm install --save use-media-size

yarn add use-media-size

```

### When shouldn't I use this library?

By its nature this library is controversial, I dislike the idea of mixing media queries within javascript.

In some use cases however, it is beneficial to hide a tree of components depending on media size. 

In the first instance you should stick with css + media queries.

If you are doing something "expensive" for medium / large screens and want a drastically different component tree for smaller screens this library should be considered.

## Hooks included

### useMediaQuery

Watches a css media query and returns a boolean if it is satisfied. Uses [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) behind the scenes.

```

import { useMediaQuery } = 'use-media-size';

const isSatisfied = useMediaQuery('(max-width: 100px)')

```

### useMediaSize

```

import { useMediaSize } = 'use-media-size';

// Default

const {isSm, isMd, isLg, isXl} = useMediaSize();

// Override on an individual basis

const {isSm, isMd, isLg, isXl} = useMediaSize({ sm: 520 });

```

### Full usage

#### Standard

```jsx

import React from 'react';

import { useMediaSize } from 'use-media-size';

const App = () => (

  

)

const MyComponent = () => {

  const { isSm, isMd, isLg, isXl } = useMediaSize();

  return (

    


      {isSm && "Small"}

      {isMd && "Medium"}

      {isLg && "Large"}

      {isXl && "Extra large"}

    

  );

}

```


#####  Defaults

This library defaults to "Twitter bootstrap" sizing.

| | | |

|-|-|-|

|sm|576px|

|md|768px|

|lg|992px|

|xl|1200px|

#### Customize size across the board

The hook will first check for a "parent" context so can be customized for your use case.

 

```jsx

import React from 'react';

import { useMediaSize, MediaSizeQueriesContextProvider } from 'use-media-size';

const App = () => (

    

      

    

)

const MyComponent = () => {

  const { isSm, isMd, isLg, isXl } = useMediaSize();

  return (

    


      {isSm && "Small"}

      {isMd && "Medium"}

      {isLg && "Large"}

      {isXl && "Extra large"}

    

  );

}

```


## Server side rendering

Although not tested this library should work with SSR applications.