{"_id":"react-media-hook2","_rev":"2815441","name":"react-media-hook2","description":"[![NPM version](https://img.shields.io/npm/v/react-media-hook2.svg?style=flat)](https://npmjs.org/package/react-media-hook2) [![NPM downloads](http://img.shields.io/npm/dm/react-media-hook2.svg?style=flat)](https://npmjs.org/package/react-media-hook2) [![","dist-tags":{"latest":"1.1.2"},"maintainers":[{"name":"imhele","email":"work@imhele.com"}],"time":{"modified":"2022-09-06T14:05:26.000Z","created":"2019-02-08T15:15:37.576Z","1.1.2":"2019-06-19T12:35:11.601Z","1.1.1":"2019-06-19T12:17:57.315Z","1.1.0":"2019-06-09T06:48:18.785Z","1.0.5":"2019-03-10T04:14:50.018Z","1.0.2":"2019-02-09T09:08:28.774Z","1.0.1":"2019-02-08T17:16:17.613Z","1.0.0":"2019-02-08T15:15:37.576Z"},"users":{},"repository":{"type":"git","url":"git+https://github.com/imhele/react-media-hook2.git"},"versions":{"1.1.2":{"name":"react-media-hook2","version":"1.1.2","main":"lib/index.js","types":"lib/index.d.ts","typings":"lib/index.d.ts","scripts":{"build":"npm run build:es && npm run build:lib","build:lib":"tsc --build tsconfig.json","build:es":"tsc --build tsconfig.es.json","coverage":"cat ./coverage/lcov.info | coveralls","lint":"tslint \"src/**/*.ts\" \"test/**/*.ts\"","precommit":"lint-staged","test":"umi-test","test:coverage":"umi-test --coverage"},"keywords":["react","hook","hooks","media","use"],"lint-staged":{"*.{ts,tsx}":["tslint --fix","git add"]},"repository":{"type":"git","url":"git+https://github.com/imhele/react-media-hook2.git"},"homepage":"https://github.com/imhele/react-media-hook2","authors":["Hele (https://github.com/imhele)"],"bugs":{"url":"https://github.com/imhele/react-media-hook2/issues"},"license":"MIT","peerDependencies":{"react":"^16.8.0"},"devDependencies":{"@types/jest":"^23.3.11","@types/node":"^11.11.0","@types/react":"^16.8.4","@types/react-dom":"^16.8.2","coveralls":"^3.0.2","lint-staged":"^8.1.0","react":"^16.8.4","react-dom":"^16.8.2","tslint":"^5.12.0","tslint-eslint-rules":"^5.4.0","typescript":"~3.2.2","umi-test":"~1.3.0"},"gitHead":"088e7b6196e8d3fdc45e099f095bf39ed4477c84","description":"[![NPM version](https://img.shields.io/npm/v/react-media-hook2.svg?style=flat)](https://npmjs.org/package/react-media-hook2) [![NPM downloads](http://img.shields.io/npm/dm/react-media-hook2.svg?style=flat)](https://npmjs.org/package/react-media-hook2) [![","_id":"react-media-hook2@1.1.2","_npmVersion":"6.4.1","_nodeVersion":"10.15.1","_npmUser":{"name":"imhele","email":"work@imhele.com"},"dist":{"shasum":"e6b57f2210ce4c84e2d821fb7ed67631e7b7c14c","size":5060,"noattachment":false,"key":"/react-media-hook2/-/react-media-hook2-1.1.2.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-media-hook2/download/react-media-hook2-1.1.2.tgz"},"maintainers":[{"name":"imhele","email":"work@imhele.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-media-hook2_1.1.2_1560947711489_0.26389352102173325"},"_hasShrinkwrap":false,"publish_time":1560947711601,"_cnpm_publish_time":1560947711601,"_cnpmcore_publish_time":"2021-12-16T10:35:35.818Z"},"1.1.1":{"name":"react-media-hook2","version":"1.1.1","main":"lib/index.js","types":"lib/index.d.ts","typings":"lib/index.d.ts","scripts":{"build":"npm run build:es && npm run build:lib","build:lib":"tsc --build tsconfig.json","build:es":"tsc --build tsconfig.es.json","coverage":"cat ./coverage/lcov.info | coveralls","lint":"tslint \"src/**/*.ts\" \"test/**/*.ts\"","precommit":"lint-staged","test":"umi-test","test:coverage":"umi-test --coverage"},"keywords":["react","hook","hooks","media","use"],"lint-staged":{"*.{ts,tsx}":["tslint --fix","git add"]},"repository":{"type":"git","url":"git+https://github.com/imhele/react-media-hook2.git"},"homepage":"https://github.com/imhele/react-media-hook2","authors":["Hele (https://github.com/imhele)"],"bugs":{"url":"https://github.com/imhele/react-media-hook2/issues"},"license":"MIT","peerDependencies":{"react":"^16.8.0"},"devDependencies":{"@types/jest":"^23.3.11","@types/node":"^11.11.0","@types/react":"^16.8.4","@types/react-dom":"^16.8.2","coveralls":"^3.0.2","lint-staged":"^8.1.0","react":"^16.8.4","react-dom":"^16.8.2","tslint":"^5.12.0","tslint-eslint-rules":"^5.4.0","typescript":"~3.2.2","umi-test":"~1.3.0"},"gitHead":"e859ae16024f596ba12e6e4043c21debd751fce9","description":"[![NPM version](https://img.shields.io/npm/v/react-media-hook2.svg?style=flat)](https://npmjs.org/package/react-media-hook2) [![NPM downloads](http://img.shields.io/npm/dm/react-media-hook2.svg?style=flat)](https://npmjs.org/package/react-media-hook2) [![","_id":"react-media-hook2@1.1.1","_npmVersion":"6.4.1","_nodeVersion":"10.15.1","_npmUser":{"name":"imhele","email":"work@imhele.com"},"dist":{"shasum":"7586962b7c18954b89ad0df24c512bc92fa742bb","size":5311,"noattachment":false,"key":"/react-media-hook2/-/react-media-hook2-1.1.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-media-hook2/download/react-media-hook2-1.1.1.tgz"},"maintainers":[{"name":"imhele","email":"work@imhele.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-media-hook2_1.1.1_1560946677221_0.5118544969174075"},"_hasShrinkwrap":false,"publish_time":1560946677315,"_cnpm_publish_time":1560946677315,"_cnpmcore_publish_time":"2021-12-16T10:35:36.049Z"},"1.1.0":{"name":"react-media-hook2","version":"1.1.0","main":"lib/index.js","module":"es/index.js","types":"lib/index.d.ts","typings":"lib/index.d.ts","scripts":{"build":"npm run build:es && npm run build:lib","build:lib":"tsc --build tsconfig.json","build:es":"tsc --build tsconfig.es.json","coverage":"cat ./coverage/lcov.info | coveralls","lint":"tslint \"src/**/*.ts\" \"test/**/*.ts\"","precommit":"lint-staged","test":"umi-test","test:coverage":"umi-test --coverage"},"keywords":["react","hook","hooks","media","use"],"lint-staged":{"*.{ts,tsx}":["tslint --fix","git add"]},"repository":{"type":"git","url":"git+https://github.com/imhele/react-media-hook2.git"},"homepage":"https://github.com/imhele/react-media-hook2","authors":["Hele (https://github.com/imhele)"],"bugs":{"url":"https://github.com/imhele/react-media-hook2/issues"},"license":"MIT","peerDependencies":{"react":"^16.8.0"},"devDependencies":{"@types/jest":"^23.3.11","@types/node":"^11.11.0","@types/react":"^16.8.4","@types/react-dom":"^16.8.2","coveralls":"^3.0.2","lint-staged":"^8.1.0","react":"^16.8.4","react-dom":"^16.8.2","tslint":"^5.12.0","tslint-eslint-rules":"^5.4.0","typescript":"~3.2.2","umi-test":"~1.3.0"},"gitHead":"526695e7a99438e55a882ae2ebc41855dbc52570","description":"[![NPM version](https://img.shields.io/npm/v/react-media-hook2.svg?style=flat)](https://npmjs.org/package/react-media-hook2) [![NPM downloads](http://img.shields.io/npm/dm/react-media-hook2.svg?style=flat)](https://npmjs.org/package/react-media-hook2) [![","_id":"react-media-hook2@1.1.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.1","_npmUser":{"name":"imhele","email":"work@imhele.com"},"dist":{"shasum":"d5193df7b4032e515789c3b66ac924852586d58a","size":5321,"noattachment":false,"key":"/react-media-hook2/-/react-media-hook2-1.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-media-hook2/download/react-media-hook2-1.1.0.tgz"},"maintainers":[{"name":"imhele","email":"work@imhele.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-media-hook2_1.1.0_1560062898680_0.35199147885964677"},"_hasShrinkwrap":false,"publish_time":1560062898785,"deprecated":"fix es module in ^1.1.2","_cnpm_publish_time":1560062898785,"_cnpmcore_publish_time":"2021-12-16T10:35:36.241Z"},"1.0.5":{"name":"react-media-hook2","version":"1.0.5","main":"./lib/index.js","types":"./lib/index.d.ts","typings":"./lib/index.d.ts","scripts":{"build":"tsc -p .","coverage":"cat ./coverage/lcov.info | coveralls","lint":"tslint \"src/**/*.ts\" \"test/**/*.ts\"","precommit":"lint-staged","test":"umi-test","test:coverage":"umi-test --coverage"},"keywords":["react","hook","hooks","media","use"],"lint-staged":{"*.{ts,tsx}":["tslint --fix","git add"]},"repository":{"type":"git","url":"git+https://github.com/imhele/react-media-hook2.git"},"homepage":"https://github.com/imhele/react-media-hook2","authors":["Hele (https://github.com/imhele)"],"bugs":{"url":"https://github.com/imhele/react-media-hook2/issues"},"license":"MIT","peerDependencies":{"react":"^16.8.0"},"devDependencies":{"@types/jest":"^23.3.11","@types/node":"^11.11.0","@types/react":"^16.8.4","@types/react-dom":"^16.8.2","coveralls":"^3.0.2","lint-staged":"^8.1.0","react":"^16.8.4","react-dom":"^16.8.2","tslint":"^5.12.0","tslint-eslint-rules":"^5.4.0","typescript":"~3.2.2","umi-test":"~1.3.0"},"gitHead":"cdb56c590e93e10c9745645fd12128f4af6d64ba","description":"[![NPM version](https://img.shields.io/npm/v/react-media-hook2.svg?style=flat)](https://npmjs.org/package/react-media-hook2) [![NPM downloads](http://img.shields.io/npm/dm/react-media-hook2.svg?style=flat)](https://npmjs.org/package/react-media-hook2) [![","_id":"react-media-hook2@1.0.5","_npmVersion":"6.4.1","_nodeVersion":"10.15.1","_npmUser":{"name":"imhele","email":"work@imhele.com"},"dist":{"shasum":"5b2838fd18924023338d8f3c3fc228af10991843","size":5741,"noattachment":false,"key":"/react-media-hook2/-/react-media-hook2-1.0.5.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-media-hook2/download/react-media-hook2-1.0.5.tgz"},"maintainers":[{"name":"imhele","email":"work@imhele.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-media-hook2_1.0.5_1552191289871_0.5161270594888794"},"_hasShrinkwrap":false,"publish_time":1552191290018,"_cnpm_publish_time":1552191290018,"_cnpmcore_publish_time":"2021-12-16T10:35:36.654Z"},"1.0.2":{"name":"react-media-hook2","version":"1.0.2","main":"./lib/index.js","types":"./lib/index.d.ts","typings":"./lib/index.d.ts","scripts":{"build":"tsc -p .","coverage":"cat ./coverage/lcov.info | coveralls","lint":"tslint \"src/**/*.ts\" \"test/**/*.ts\"","precommit":"lint-staged","test":"umi-test","test:coverage":"umi-test --coverage"},"keywords":["react","hook","hooks","media","use"],"lint-staged":{"*.{ts,tsx}":["tslint --fix","git add"]},"repository":{"type":"git","url":"git+https://github.com/imhele/react-media-hook2.git"},"homepage":"https://github.com/imhele/react-media-hook2","authors":["Hele (https://github.com/imhele)"],"bugs":{"url":"https://github.com/imhele/react-media-hook2/issues"},"license":"MIT","peerDependencies":{"react":"^16.8.0"},"devDependencies":{"@types/jest":"^23.3.11","@types/react":"^16.8.0","@types/react-dom":"^16.8.0","coveralls":"^3.0.2","lint-staged":"^8.1.0","react":"^16.8.1","react-dom":"^16.8.1","tslint":"^5.12.0","tslint-eslint-rules":"^5.4.0","typescript":"~3.2.2","umi-test":"~1.3.0"},"gitHead":"a03e8eac3e312a77c70fd93807f5b089e826ff81","description":"[![NPM version](https://img.shields.io/npm/v/react-media-hook2.svg?style=flat)](https://npmjs.org/package/react-media-hook2) [![NPM downloads](http://img.shields.io/npm/dm/react-media-hook2.svg?style=flat)](https://npmjs.org/package/react-media-hook2) [![","_id":"react-media-hook2@1.0.2","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"imhele","email":"work@imhele.com"},"dist":{"shasum":"36661efbffe1edd2bb1cb97785f85cbd39f5cef4","size":5516,"noattachment":false,"key":"/react-media-hook2/-/react-media-hook2-1.0.2.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-media-hook2/download/react-media-hook2-1.0.2.tgz"},"maintainers":[{"name":"imhele","email":"work@imhele.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-media-hook2_1.0.2_1549703308659_0.9503792130174258"},"_hasShrinkwrap":false,"publish_time":1549703308774,"_cnpm_publish_time":1549703308774,"_cnpmcore_publish_time":"2021-12-16T10:35:36.912Z"},"1.0.1":{"name":"react-media-hook2","version":"1.0.1","main":"./lib/index.js","types":"./lib/index.d.ts","typings":"./lib/index.d.ts","scripts":{"build":"tsc -p .","coverage":"cat ./coverage/lcov.info | coveralls","lint":"tslint \"src/**/*.ts\" \"test/**/*.ts\"","precommit":"lint-staged","test":"umi-test","test:coverage":"umi-test --coverage"},"keywords":["react","hook","hooks","media","use"],"lint-staged":{"*.{ts,tsx}":["tslint --fix","git add"]},"repository":{"type":"git","url":"git+https://github.com/imhele/react-media-hook2.git"},"homepage":"https://github.com/imhele/react-media-hook2","authors":["Hele (https://github.com/imhele)"],"bugs":{"url":"https://github.com/imhele/react-media-hook2/issues"},"license":"MIT","peerDependencies":{"react":"^16.8.0"},"devDependencies":{"@types/jest":"^23.3.11","@types/react":"16.8.0","coveralls":"^3.0.2","lint-staged":"^8.1.0","tslint":"^5.12.0","tslint-eslint-rules":"^5.4.0","typescript":"~3.2.2","umi-test":"~1.3.0"},"gitHead":"e59fa3865626a4c940e38bd9f95600b73b97b093","description":"[![NPM version](https://img.shields.io/npm/v/react-media-hook2.svg?style=flat)](https://npmjs.org/package/react-media-hook2) [![NPM downloads](http://img.shields.io/npm/dm/react-media-hook2.svg?style=flat)](https://npmjs.org/package/react-media-hook2) [![","_id":"react-media-hook2@1.0.1","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"imhele","email":"work@imhele.com"},"dist":{"shasum":"e4aa247687f734e40c97c5d6d9eb363b11a53d39","size":5408,"noattachment":false,"key":"/react-media-hook2/-/react-media-hook2-1.0.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-media-hook2/download/react-media-hook2-1.0.1.tgz"},"maintainers":[{"name":"imhele","email":"work@imhele.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-media-hook2_1.0.1_1549646177395_0.582773019981178"},"_hasShrinkwrap":false,"publish_time":1549646177613,"_cnpm_publish_time":1549646177613,"_cnpmcore_publish_time":"2021-12-16T10:35:37.109Z"},"1.0.0":{"name":"react-media-hook2","version":"1.0.0","main":"./lib/index.js","types":"./lib/index.d.ts","typings":"./lib/index.d.ts","scripts":{"build":"tsc -p .","coverage":"cat ./coverage/lcov.info | coveralls","lint":"tslint \"src/**/*.ts\" \"test/**/*.ts\"","precommit":"lint-staged","test":"umi-test","test:coverage":"umi-test --coverage"},"keywords":["react","hook","hooks","media","use"],"lint-staged":{"*.{ts,tsx}":["tslint --fix","git add"]},"repository":{"type":"git","url":"git+https://github.com/imhele/react-media-hook2.git"},"homepage":"https://github.com/imhele/react-media-hook2","authors":["Hele (https://github.com/imhele)"],"bugs":{"url":"https://github.com/imhele/react-media-hook2/issues"},"license":"MIT","peerDependencies":{"react":"^16.8.0"},"devDependencies":{"@types/jest":"^23.3.11","@types/react":"16.8.0","coveralls":"^3.0.2","lint-staged":"^8.1.0","tslint":"^5.12.0","tslint-eslint-rules":"^5.4.0","typescript":"~3.2.2","umi-test":"~1.3.0"},"description":"[![NPM version](https://img.shields.io/npm/v/react-media-hook2.svg?style=flat)](https://npmjs.org/package/react-media-hook2) [![NPM downloads](http://img.shields.io/npm/dm/react-media-hook2.svg?style=flat)](https://npmjs.org/package/react-media-hook2) [![","_id":"react-media-hook2@1.0.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"imhele","email":"work@imhele.com"},"dist":{"shasum":"411c5ebcd63a9aa02ce15c289efb1a7bc4fa1dbe","size":4287,"noattachment":false,"key":"/react-media-hook2/-/react-media-hook2-1.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-media-hook2/download/react-media-hook2-1.0.0.tgz"},"maintainers":[{"name":"imhele","email":"work@imhele.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-media-hook2_1.0.0_1549638937420_0.39672198733435105"},"_hasShrinkwrap":false,"publish_time":1549638937576,"_cnpm_publish_time":1549638937576,"_cnpmcore_publish_time":"2021-12-16T10:35:37.368Z"}},"readme":"# react-media-hook2\n\n[![NPM version](https://img.shields.io/npm/v/react-media-hook2.svg?style=flat)](https://npmjs.org/package/react-media-hook2)\n[![NPM downloads](http://img.shields.io/npm/dm/react-media-hook2.svg?style=flat)](https://npmjs.org/package/react-media-hook2)\n[![Build Status](https://img.shields.io/travis/imhele/react-media-hook2.svg?style=flat)](https://travis-ci.org/imhele/react-media-hook2)\n[![Coverage Status](https://coveralls.io/repos/github/imhele/react-media-hook2/badge.svg?branch=master)](https://coveralls.io/github/imhele/react-media-hook2?branch=master)\n[![License](https://img.shields.io/npm/l/react-media-hook2.svg)](https://npmjs.org/package/react-media-hook2)\n\nEnglish | [简体中文](https://github.com/imhele/react-media-hook2/blob/master/README-zh_CN.md)\n\n## Install\n\n```sh\n$ npm install react-media-hook2 --save\nor\n$ yarn add react-media-hook2\n```\n\n## Options\n\n```ts\ninterface UseMediaProps {\n defaultMatches?: boolean;\n id?: any;\n onChange?: (matches: boolean) => void | boolean;\n paused?: boolean;\n query?: string | MediaQueryProperties | MediaQueryProperties[];\n targetWindow?: Window;\n}\n```\n\n## Example\n\n### Basic usage\n\n```jsx\nimport useMedia from 'react-media-hook2';\n\nexport default () => {\n const [matches, setProps] = useMedia({ query: '(max-width: 600px)' });\n return
Width of window is {matches ? 'less' : 'greater'} than 600px.
;\n};\n```\n\n### With `MediaQueryProperties`\n\n```jsx\nimport useMedia from 'react-media-hook2';\n\nexport default () => {\n const [matches, setProps] = useMedia({ query: { maxWidth: 600 } });\n return
Width of window is {matches ? 'less' : 'greater'} than 600px.
;\n};\n```\n\n### Callback\n\nFor example, when the screen width changes, let the side menu expand or collapse once automatically.\n\n```jsx\nimport { useState } from 'react';\nimport useMedia from 'react-media-hook2';\n\nexport default () => {\n const [collapsed, setCollapsed] = useState(false);\n const [matches, setProps] = useMedia({ query: { maxWidth: 600 }, onChange: setCollapsed });\n return ;\n};\n```\n\nTips: if `onChange` return `true`, **`useMedia` will not change the `matches` this time**.\n\n### `getUseMedia`\n\nSometimes 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.\n\n```jsx\nimport ChildComponent from './example';\nimport useMedia from 'react-media-hook2';\n\nexport default () => {\n const [matches, setProps] = useMedia({ id: 0, query: { maxWidth: 600 } });\n return (\n
\n
Width of window is {matches ? 'less' : 'greater'} than 600px.
\n \n
\n );\n};\n\n// `./example`\nimport { getUseMedia } from 'react-media-hook2';\n\nexport default () => {\n const [matches, setProps] = getUseMedia(0);\n return
matches: {matches}
\n}\n```\n\n### Pause listener\n\nYou can pause listener to provide additional *desktop version* on mobile devices.\n\n```jsx\nimport { useState } from 'react';\nimport useMedia from 'react-media-hook2';\n\nexport default () => {\n const [matches, setProps] = useMedia({ query: '(max-width: 600px)' });\n return (\n
\n
Width of window is {matches ? 'less' : 'greater'} than 600px.
\n \n
\n );\n};\n```\n\n### Reset props\n\n```jsx\nimport { useState } from 'react';\nimport useMedia from 'react-media-hook2';\n\nexport default () => {\n const [matches, setProps] = useMedia({ query: '(max-width: 600px)' });\n const setRandomValue = () =>\n setProps(prevProps => ({ ...prevProps, query: { maxWidth: Math.Random() * 1000 } }));\n return (\n
\n
Width of window is {matches ? 'less' : 'greater'} than 600px.
\n \n
\n );\n};\n```\n\n### In _TypeScript_\n\nYou can use `enum` to ensure that the `id` is globally unique:\n\n```tsx\nimport React from 'react';\nimport useMedia from 'react-media-hook2';\n\nexport enum GlobalId {\n MyComponent,\n}\n\nexport default () => {\n const [matches, setProps] = useMedia({ id: GlobalId.MyComponent, query: '(max-width: 600px)' });\n return
Width of window is {matches ? 'less' : 'greater'} than 600px
;\n};\n```\n","_attachments":{},"homepage":"https://github.com/imhele/react-media-hook2","bugs":{"url":"https://github.com/imhele/react-media-hook2/issues"},"license":"MIT"}