mobx-matchmedia
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

mobx-matchmedia

A MobX observable for window.matchMedia

Install

yarn add mobx-matchmedia
# or
npm i mobx-matchmedia

Simple Usage

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

import React from "react";
import { observer } from "mobx-react-lite";
import { matchMedia } from "mobx-matchmedia";

const MyComponent = observer(() => (
  <div>
    Your OS is in
    {' '}
    {matchMedia('(prefers-color-scheme: dark)') ? 'dark' : 'light'}
    {' '}
    mode
  </div>
));

Dependencies (0)

    Dev Dependencies (6)

    Package Sidebar

    Install

    npm i mobx-matchmedia

    Weekly Downloads

    6

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    4.71 kB

    Total Files

    12

    Last publish

    Collaborators

    • ziad-saab