https://github.com/ziad-saab/mobx-matchmedia
A MobX observable for window.matchMedia
https://github.com/ziad-saab/mobx-matchmedia
matchmedia-api media-queries mobx react
Last synced: about 2 months ago
JSON representation
A MobX observable for window.matchMedia
- Host: GitHub
- URL: https://github.com/ziad-saab/mobx-matchmedia
- Owner: ziad-saab
- Created: 2021-01-24T22:54:37.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-01-24T23:08:17.000Z (over 4 years ago)
- Last Synced: 2025-02-02T04:26:01.073Z (3 months ago)
- Topics: matchmedia-api, media-queries, mobx, react
- Language: TypeScript
- Homepage:
- Size: 60.5 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# `mobx-matchmedia`
A [MobX](https://mobx.js.org/README.html) observable for [`window.matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
## Install
```sh
yarn add mobx-matchmedia
# or
npm i mobx-matchmedia
```
## Simple Usage
```js
import { autorun } from "mobx";
import { matchMedia } from "mobx-matchmedia";
autorun(() => {
if (matchMedia("(prefers-color-scheme: dark)")) {
console.log('Your OS is in dark mode');
} else {
console.log('Your OS is in light mode');
}
});
```
## React Usage
```js
import React from "react";
import { observer } from "mobx-react-lite";
import { matchMedia } from "mobx-matchmedia";
const MyComponent = observer(() => (
Your OS is in
{' '}
{matchMedia('(prefers-color-scheme: dark)') ? 'dark' : 'light'}
{' '}
mode
));
```