use-media-easy

English | 简体中文

Install

$ npm install use-media-easy --save
or
$ yarn add use-media-easy

Options

interface UseMediaProps {
  defaultMatches?: boolean;
  id?: any;
  onChange?: (matches: boolean) => void | boolean;
  paused?: boolean;
  query?: string | MediaQueryProperties | MediaQueryProperties[];
  targetWindow?: Window;
}

Example

Basic usage

import useMedia from 'use-media-easy';

export default () => {
  const [matches, setProps] = useMedia({ query: '(max-width: 600px)' });
  return <div>Width of window is {matches ? 'less' : 'greater'} than 600px.</div>;
};

With MediaQueryProperties

import useMedia from 'use-media-easy';

export default () => {
  const [matches, setProps] = useMedia({ query: { maxWidth: 600 } });
  return <div>Width of window is {matches ? 'less' : 'greater'} than 600px.</div>;
};

Callback

For example, when the screen width changes, let the side menu expand or collapse once automatically.

import { useState } from 'react';
import useMedia from 'use-media-easy';

export default () => {
  const [collapsed, setCollapsed] = useState(false);
  const [matches, setProps] = useMedia({ query: { maxWidth: 600 }, onChange: setCollapsed });
  return <MenuComponen collapsed={collapsed} onCollapsed={setCollapsed} />;
};

Tips: if onChange return true, useMedia will not change the matches this time.

getUseMedia

Sometimes we need to use the same media query in many components to achieve responsiveness, so getUseMedia is provided for you to get the hook created in other components.

import ChildComponent from './example';
import useMedia from 'use-media-easy';

export default () => {
  const [matches, setProps] = useMedia({ id: 0, query: { maxWidth: 600 } });
  return (
    <div>
      <div>Width of window is {matches ? 'less' : 'greater'} than 600px.</div>
      <ChildComponent />
    </div>
  );
};

// `./example`
import { getUseMedia } from 'use-media-easy';

export default () => {
  const [matches, setProps] = getUseMedia(0);
  return <div>matches: {matches}</div>
}

Pause listener

You can pause listener to provide additional desktop version on mobile devices.

import { useState } from 'react';
import useMedia from 'use-media-easy';

export default () => {
  const [matches, setProps] = useMedia({ query: '(max-width: 600px)' });
  return (
    <div>
      <div>Width of window is {matches ? 'less' : 'greater'} than 600px.</div>
      <button onClick={() => setProps(prevProps => ({ ...prevProps, paused: true }))}>
        Pause listener
      </button>
    </div>
  );
};

Reset props

import { useState } from 'react';
import useMedia from 'use-media-easy';

export default () => {
  const [matches, setProps] = useMedia({ query: '(max-width: 600px)' });
  const setRandomValue = () =>
    setProps(prevProps => ({ ...prevProps, query: { maxWidth: Math.Random() * 1000 } }));
  return (
    <div>
      <div>Width of window is {matches ? 'less' : 'greater'} than 600px.</div>
      <button onClick={setRandomValue}>Set a random value</button>
    </div>
  );
};

In TypeScript

You can use enum to ensure that the id is globally unique:

import React from 'react';
import useMedia from 'use-media-easy';

export enum GlobalId {
  MyComponent,
}

export default () => {
  const [matches, setProps] = useMedia({ id: GlobalId.MyComponent, query: '(max-width: 600px)' });
  return <div>Width of window is {matches ? 'less' : 'greater'} than 600px</div>;
};