@scaleway/use-media

2.0.1 • Public • Published

@scaleway/use-media

A small hook to track CSS media query state

This library has been forked from use-media, many thanks to the original author, Vadim Dalecky.

Install

$ pnpm add @scaleway/use-media

Usage

With useEffect

import { useMedia } from '@scaleway/use-media'

const App = () => {
  // Accepts an object of features to test
  const isWide = useMedia({ minWidth: '1000px' });
  // Or a regular media query string
  const reduceMotion = useMedia('(prefers-reduced-motion: reduce)');

  return (
    <div>
      Screen is wide: {isWide ? '😃' : '😢'}
    </div>
  );
}

With useLayoutEffect

import { useMediaLayout } from '@scaleway/use-media'

const App = () => {
  // Accepts an object of features to test
  const isWide = useMediaLayout({ minWidth: '1000px' });
  // Or a regular media query string
  const reduceMotion = useMediaLayout('(prefers-reduced-motion: reduce)');

  return (
    <div>
      Screen is wide: {isWide ? '😃' : '😢'}
    </div>
  );
}

Package Sidebar

Install

npm i @scaleway/use-media

Weekly Downloads

2,521

Version

2.0.1

License

MIT

Unpacked Size

6.11 kB

Total Files

8

Last publish

Collaborators

  • codelax
  • quantumsheep
  • scaleway-bot
  • mprost
  • imanu
  • chambof
  • vincentaudebert
  • maliszewskid
  • phiphi