# react-match-media-context

> detect viewport size according to your configuration!

Latest version **1.0.8** (published 2020-02-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-match-media-context
pnpm add react-match-media-context
yarn add react-match-media-context
bun add react-match-media-context
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2020-02-29 |
| First published | 2020-02-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Woravan Suthatar |
| Maintainers | anchvy |
| Keywords | screen, size, viewport, browser, detect, width, responsive, react, match-media, matchmedia |

## Links

- npm: https://www.npmjs.com/package/react-match-media-context
- Repository: https://github.com/anchvy/react-match-media-context
- Homepage: https://github.com/anchvy/react-match-media-context#readme
- Issues: https://github.com/anchvy/react-match-media-context/issues
- npm.io page: https://npm.io/package/react-match-media-context

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.8 (latest) — 2020-02-29
- 1.0.7 — 2020-02-29
- 1.0.6 — 2020-02-29
- 1.0.5 — 2020-02-22
- 1.0.4 — 2020-02-22
- 1.0.3 — 2020-02-22
- 1.0.2 — 2020-02-22
- 1.0.1 — 2020-02-22
- 1.0.0 — 2020-02-22

## README

# react-match-media-context

✨ Super lightweight package to handle responsive as needed with React context and window.matchMedia! <Javascript>


![giphy](https://user-images.githubusercontent.com/29141862/75099443-137ce980-5605-11ea-9e46-59ba99431027.gif)


## Installation
```npm
$ npm install react-match-media-context  
```
```yarn
$ yarn add react-match-media-context  
```

## How to use?!

1. Import the context and put on ROOT component and apply with your custom configuration to `media` prop!

```import-provider
// App.js

import { MatchMediaProvider } from 'react-match-media-context'

// custom configuration example
// you can get { mobile, tablet, desktop, customScreen, foo, bar, ...whatever you need } from context!

const media = {
  bar: {
    minWidth: '250px',
    maxWidth: '450px',
  },
  mobile: {
    maxWidth: '450px',
    isDefaultValue: true, // fallback state on ssr
  },
  tablet: {
    minWidth: '451px',
    maxWidth: '800px',
  },
  desktop: {
    minWidth: '801px',
    maxWidth: '1000px',
  },
  foo: {
    minWidth: '1000px',
  },
  [your custom variable name]: { 
    minWidth: 'xxx',
    maxWidth: 'xxx', 
    isDefaultValue: true, // optional
  }
}

const App = () => {
  return (
    <MatchMediaProvider media={media}>
      <HomePage />
    </MatchMediaProvider>
  )
}
```

2. Go to your responsive styled component

```import-context
// NavigationBar.js

import React, { useContext } from 'react'
import MatchMediaContext from 'react-match-media-context'

import NavMobile from './nav/mobile'
import NavDesktop from './nav/desktop'

const NavigationBar = () => {
  // relate to above configuration, you can get;
  // { mobile, tablet, desktop, foo, bar } = useContext(MatchMediaContext)
  const { mobile } = useContext(MatchMediaContext)
  const navBarComponent = mobile ? NavMobile : NavDesktop

  return (
    <div className="some-navbar-classname">
       {navBarComponent}
    </div>
  )
}
```

## Limitation!

- The window.matchMedia is being used for this package. Please check the browser compatibility on https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
- `react` and `react-dom` must be ^16.8 or above
- Does not support on SSR 😞 (Please set `isDefaultValue` on fallback item)
- Support `min-width` and `max-width` as of now ~


## Props

### MatchMediaProvider's props

- media `<{ [key: string]: Object }>`
  - `Object.minWidth <string>`: minimum screen width to be matched
  - `Object.maxWidth <string>`: maximum screen width to be matched
  - `Object.isDefaultValue? <boolean>`: if it's defined as true, when we cannot access window.matchMedia (SSR) or the current running browser is not supported. The value of this key will be true.

---
_Source: https://npm.io/package/react-match-media-context · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._