use-media-easy
English | 简体中文
Install
$ npm install use-media-easy --saveor$ yarn add use-media-easy
Options
Example
Basic usage
import useMedia from 'use-media-easy'; const matches setProps = ; return <div>Width of window is matches ? 'less' : 'greater' than 600px</div>;;
MediaQueryProperties
With import useMedia from 'use-media-easy'; const matches setProps = ; 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'; const collapsed setCollapsed = ; const matches setProps = ; return <MenuComponen = = />;;
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'; const matches setProps = ; return <div> <div>Width of window is matches ? 'less' : 'greater' than 600px</div> <ChildComponent /> </div> ;; // `./example`import getUseMedia from 'use-media-easy'; const matches setProps = ; 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'; const matches setProps = ; return <div> <div>Width of window is matches ? 'less' : 'greater' than 600px</div> <button => Pause listener </button> </div> ;;
Reset props
import useState from 'react';import useMedia from 'use-media-easy'; const matches setProps = ; const setRandomValue = ; return <div> <div>Width of window is matches ? 'less' : 'greater' than 600px</div> <button =>Set a random value</button> </div> ;;
In TypeScript
You can use enum
to ensure that the id
is globally unique:
;; ;