react-media-hook2
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.2 • Public • Published

    react-media-hook2

    NPM version NPM downloads Build Status Coverage Status License

    English | 简体中文

    Install

    $ npm install react-media-hook2 --save
    or
    $ yarn add react-media-hook2

    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 'react-media-hook2';
     
    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 'react-media-hook2';
     
    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 'react-media-hook2';
     
    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 'react-media-hook2';
     
    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 'react-media-hook2';
     
    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 'react-media-hook2';
     
    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 'react-media-hook2';
     
    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 'react-media-hook2';
     
    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>;
    };

    Install

    npm i react-media-hook2

    DownloadsWeekly Downloads

    325

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    21 kB

    Total Files

    15

    Last publish

    Collaborators

    • imhele