English | 简体中文
$ npm install use-media-easy --save
or
$ yarn add use-media-easyinterface UseMediaProps {
defaultMatches?: boolean;
id?: any;
onChange?: (matches: boolean) => void | boolean;
paused?: boolean;
query?: string | MediaQueryProperties | MediaQueryProperties[];
targetWindow?: Window;
}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>;
};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>;
};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.
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>
}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>
);
};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>
);
};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>;
};
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent