Skip to content

const [matches, setProps] = useMedia({ query: '(max-width: 600px)', onChange: console.log });

License

Notifications You must be signed in to change notification settings

imhele/use-media-easy

Repository files navigation

use-media-easy

NPM version NPM downloads Build Status Coverage Status License

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>;
};

About

const [matches, setProps] = useMedia({ query: '(max-width: 600px)', onChange: console.log });

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published