├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── .npmignore ├── .travis.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── dist ├── react-responsive.js ├── react-responsive.js.map ├── react-responsive.min.js └── react-responsive.min.js.map ├── package.json ├── samples ├── sandbox │ ├── dist │ │ ├── index.html │ │ ├── index.jsx │ │ ├── reset.css │ │ ├── sample.css │ │ ├── sample.js │ │ └── sample.js.map │ └── src │ │ ├── index.html │ │ ├── index.js │ │ ├── reset.css │ │ └── sample.css └── static │ ├── dist │ ├── index.js │ └── index.js.map │ └── src │ └── index.jsx ├── src ├── Component.js ├── Context.js ├── index.js ├── mediaQuery.js ├── toQuery.js └── useMediaQuery.js ├── test ├── Component_test.js ├── mediaQuery_test.js ├── setup.js ├── toQuery_test.js └── useMediaQuery_test.js ├── webpack.config.js └── webpack.config.samples.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | const { eslint } = require('@stae/linters') 2 | 3 | module.exports = eslint 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *.log 3 | node_modules 4 | build 5 | *.node 6 | coverage 7 | *.orig 8 | .idea 9 | yarn.lock 10 | package-lock.json 11 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *.log 3 | node_modules 4 | build 5 | *.node 6 | coverage 7 | *.orig 8 | .idea 9 | sandbox -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "5.10.1" 4 | after_script: 5 | - npm run coveralls 6 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## Change Log 2 | 3 | ### v8.0.0 4 | 5 | - Adds Hooks API to make everything way easier (Thanks to @Tomekmularczyk) 6 | - See README for more info on how to use it 7 | - [BREAKING] Change `values` prop to `device` 8 | 9 | ### v7.0.0 10 | 11 | - Adds Context support to make testing and server-side rendering much easier (Thanks to @Tomekmularczyk) 12 | - See README for more info on how to use it 13 | - [BREAKING] Require React v16.8.0 or higher 14 | 15 | ### v6.1.2 16 | 17 | - Fix issue with values prop changing (https://github.com/contra/react-responsive/issues/197) 18 | 19 | ### v6.1.1 20 | 21 | - Fix `forceStatic` issue with previous release 22 | 23 | ### v6.1.0 24 | 25 | - Fix `values` prop existence not forcing static query resolution (Thanks @Herdismaria) 26 | 27 | ### v6.0.0 28 | 29 | - Require React v16.3.0 or higher 30 | - Update and simplify all lifecycle functions 31 | - Remove all support for wrapper elements 32 | - Previously, when either `component` or non-mediaquery props were provided, we would render a wrapper element. This behavior no longer exists. 33 | - The rendering logic is now a basic ternary - `matches ? props.children : null` 34 | - Thanks to @whatknight for doing the work here. 35 | 36 | ### v5.0.0 37 | - New changelog system, all manual now since the automated system was overcomplicated and missed things. 38 | - Breaking: `values` property always takes precedence when provided, no matter what (https://github.com/contra/react-responsive/issues/161) 39 | 40 | ### v4.0.5 (2018/03/07 17:11 +00:00) 41 | - [e61ec94](https://github.com/contra/react-responsive/commit/e61ec9482ae6ff17d3b73fab1fbcc445aab9e9aa) 4.0.5 (@contra) 42 | - [a8ec8e6](https://github.com/contra/react-responsive/commit/a8ec8e63221fccaef245366cd707aae3c19cb233) pre-release (@contra) 43 | - [#146](https://github.com/contra/react-responsive/pull/146) Guard against null children (@lunaleaps) 44 | - [3b40652](https://github.com/contra/react-responsive/commit/3b40652acbca56dc644e1b36fa50cabdb106ccdb) Guard against null children (@lunaleaps) 45 | 46 | ### v4.0.4 (2018/02/09 22:43 +00:00) 47 | - [77d37de](https://github.com/contra/react-responsive/commit/77d37de00c8ebeffe478ab0ef748d10b7862975a) 4.0.4 (@contra) 48 | - [19191ed](https://github.com/contra/react-responsive/commit/19191ed2522460109bfff19f22d6b879925599d3) closes #140 (@contra) 49 | 50 | ### v4.0.3 (2017/11/22 03:26 +00:00) 51 | - [191d938](https://github.com/contra/react-responsive/commit/191d9380d288b8de3dd6eeafd903db46b73d820a) 4.0.3 (@contra) 52 | - [a035cc5](https://github.com/contra/react-responsive/commit/a035cc5be9e01dc42bffacb0d8b68c916a8d0637) closes #134 (@contra) 53 | 54 | ### v4.0.2 (2017/11/21 19:55 +00:00) 55 | - [6e1a359](https://github.com/contra/react-responsive/commit/6e1a359f4f0c55db6823d321c86c10a2b76052a3) 4.0.2 (@contra) 56 | 57 | ### v4.0.1 (2017/11/21 15:54 +00:00) 58 | - [2aa6b94](https://github.com/contra/react-responsive/commit/2aa6b94dfb6104d111f38c07eb99b13b9616ac37) 4.0.1 (@contra) 59 | - [6908332](https://github.com/contra/react-responsive/commit/6908332218359646416d568c75bf6ef7e974b82f) maybe fixes #134 (@contra) 60 | 61 | ### v4.0.0 (2017/11/16 00:14 +00:00) 62 | - [b78938d](https://github.com/contra/react-responsive/commit/b78938d9f51dea13cc14e3227fce3694cde9dc63) 4.0.0 (@contra) 63 | - [bd1c554](https://github.com/contra/react-responsive/commit/bd1c5547a30483367479803799f264d160d86a1e) deps (@contra) 64 | - [#132](https://github.com/contra/react-responsive/pull/132) fix: support React 16 fragments (@jessepinho) 65 | - [aefef55](https://github.com/contra/react-responsive/commit/aefef5574caa63ee9387f0db1e88889d2e98a8f7) chore: build assets (@jessepinho) 66 | - [184b88e](https://github.com/contra/react-responsive/commit/184b88e069d8ab5f4f7f41d027ce37a0b8920e2c) style: make wrapChildren one line (@jessepinho) 67 | - [95edc69](https://github.com/contra/react-responsive/commit/95edc69daeffad4a4f8575f544ebd235fada10b3) feat: don't wrap strings, either (@jessepinho) 68 | - [0436fb5](https://github.com/contra/react-responsive/commit/0436fb5fe5985d6ce9046d4baab68a83d1d77c20) chore: update React peer dependency (@jessepinho) 69 | - [36f8372](https://github.com/contra/react-responsive/commit/36f837207e84f512c41ad66ac1fa60964f77148d) fix: support React 16 fragments (@jessepinho) 70 | - [#130](https://github.com/contra/react-responsive/pull/130) docs(CHANGELOG): 3.0.0 (@evenchange4) 71 | - [aaceb45](https://github.com/contra/react-responsive/commit/aaceb4599e9a6c6701d067cbffc33b7f95188458) docs(CHANGELOG): 3.0.0 (@evenchange4) 72 | - [#129](https://github.com/contra/react-responsive/pull/129) Fix view duplication in common uses example (@sonaye) 73 | - [55a0f47](https://github.com/contra/react-responsive/commit/55a0f47b99c5a31755399240cfbe6d0033da8866) Fix view duplication in common uses example (@sonaye) 74 | - [edbd8e7](https://github.com/contra/react-responsive/commit/edbd8e7ce8d757ef902d0f59b3d29679ac9e2616) 3.0 (@contra) 75 | 76 | ### v3.0.0 (2017/10/18 00:14 +00:00) 77 | - [8a318fe](https://github.com/contra/react-responsive/commit/8a318fe9ddf363b6a4e917a13d99b1098670175a) 3.0.0 (@contra) 78 | - [6bf6814](https://github.com/contra/react-responsive/commit/6bf681491e6ed260f89db85f6dad191a84cd523b) deps (@contra) 79 | - [#128](https://github.com/contra/react-responsive/pull/128) Fix linter and tests (@refinery29) 80 | - [71b611e](https://github.com/contra/react-responsive/commit/71b611eeabc52b271ebd3127223dd7b4b7824df2) Fix repo attribution (@cribbles) 81 | - [4e8186a](https://github.com/contra/react-responsive/commit/4e8186aeaae10c8ffe757e101e4e029ef8e9da4b) Fix test (import as default) (@cribbles) 82 | - [ce0475b](https://github.com/contra/react-responsive/commit/ce0475bb4badf816aec2d73649b2c00fb63a932d) Lint (remove semicolon) (@cribbles) 83 | - [73e2862](https://github.com/contra/react-responsive/commit/73e2862c3c30c4164527aa5afa7e441ecdbe3d91) Add toQuery to default exports (@cribbles) 84 | - [#124](https://github.com/contra/react-responsive/pull/124) Export toQuery function directly since src folder is no longer exported (@morganmccrory) 85 | - [f5d9b8b](https://github.com/contra/react-responsive/commit/f5d9b8b36270c9db7f8dfecf643eb09e5e3a6f30) Export toQuery function directly since src folder is no longer exported (@morganmccrory) 86 | - [fb23be4](https://github.com/contra/react-responsive/commit/fb23be4358654eb6c614b9766fbcbd4a5daac304) log (@contra) 87 | 88 | ### v2.0.0 (2017/10/02 21:11 +00:00) 89 | - [dee5570](https://github.com/contra/react-responsive/commit/dee55700f31e4fc54ab3faf1e974c3ee3c7abf21) 2.0.0 (@contra) 90 | - [24ff262](https://github.com/contra/react-responsive/commit/24ff2623d0a9d4a864c1635190d7fa1da37f3eb0) stupid lock file (@contra) 91 | - [cb120f8](https://github.com/contra/react-responsive/commit/cb120f8953c2e05aeac03530918a31d86d3be828) house clean (@contra) 92 | - [1e05b0c](https://github.com/contra/react-responsive/commit/1e05b0c8ad22f2008cb83506146bea88014066b3) housekeeping (@contra) 93 | - [14004ab](https://github.com/contra/react-responsive/commit/14004aba9ec54fd7b807abf6ed960a6cff87ada3) housekeeping (@contra) 94 | - [8ff7425](https://github.com/contra/react-responsive/commit/8ff742533e3fdf8d113c945cbe9291c16b8b3278) rebuild (@contra) 95 | - [#120](https://github.com/contra/react-responsive/pull/120) support react 16. (@whatknight) 96 | - [6b300d7](https://github.com/contra/react-responsive/commit/6b300d7cc1bb340afa14eb046290a5d03064120b) Merge branch 'master' into react16 (@contra) 97 | - [#119](https://github.com/contra/react-responsive/pull/119) Housekeeping (@whatknight) 98 | - [#121](https://github.com/contra/react-responsive/pull/121) Update README.txt (@vpicone) 99 | - [1d19af9](https://github.com/contra/react-responsive/commit/1d19af9a5e6ddf5baf11eb27f455165430cdd405) Update README.txt (@vpicone) 100 | - [bb69da2](https://github.com/contra/react-responsive/commit/bb69da2e74b615132dd30c4eecad2b88080e5287) support react 16. (@whatknight) 101 | - [e78cab9](https://github.com/contra/react-responsive/commit/e78cab9fafceb30195ffca6858df35560f3675b6) bump sinon (@whatknight) 102 | - [8380bd9](https://github.com/contra/react-responsive/commit/8380bd91c3fbb73957f7410bd2512266f7c7053a) update webpack (@whatknight) 103 | - [9429386](https://github.com/contra/react-responsive/commit/9429386ce0891c1904baadf725837e0a3f282746) remove transform runtime (@whatknight) 104 | - [48b2a33](https://github.com/contra/react-responsive/commit/48b2a33ad9a6c61fbbbac6dad6f54838f949d61a) update test deps (@whatknight) 105 | - [81d9d18](https://github.com/contra/react-responsive/commit/81d9d181d08634527b49bb62c66f5b2c72e606f1) update eslint (@whatknight) 106 | - [307b31d](https://github.com/contra/react-responsive/commit/307b31d16cf4d336f50ad4c53739166e4bd1d80e) update babel config (@whatknight) 107 | - [#117](https://github.com/contra/react-responsive/pull/117) Update README.md (@modosc) 108 | - [0b4d019](https://github.com/contra/react-responsive/commit/0b4d0197d1011c3e5899cc6003556a6526350bc1) Update README.md (@modosc) 109 | - [c55a77e](https://github.com/contra/react-responsive/commit/c55a77ec86c2db7d2aae4a3e67a08dba09a3a455) closes #116 (@contra) 110 | 111 | ### v1.3.4 (2017/07/14 21:36 +00:00) 112 | - [c93ac7a](https://github.com/contra/react-responsive/commit/c93ac7a696a8d3f0f8a5b71ce7836375de13a28d) 1.3.4 (@contra) 113 | - [#109](https://github.com/contra/react-responsive/pull/109) fix Cannot read property 'removeListener' of undefined (@modosc) 114 | - [ea3d577](https://github.com/contra/react-responsive/commit/ea3d5774bc59fa06ad50d60e582a9f6da94b9bd5) update matchmediaquery@^0.2.1 115 | - [3687115](https://github.com/contra/react-responsive/commit/3687115de3603cfb32eb5f3e4d3b9883b12f3ed3) fix Cannot read property 'removeListener' of undefined 116 | - [83c2409](https://github.com/contra/react-responsive/commit/83c24092225fa20c96c4bded03e845cb4baf5bec) 1.3.3 (@contra) 117 | 118 | ### v1.3.3 (2017/07/14 19:32 +00:00) 119 | - [58fdb89](https://github.com/contra/react-responsive/commit/58fdb89893de8a9ec5495624c19f54bcced220c3) 1.3.3 (@contra) 120 | - [e3781d2](https://github.com/contra/react-responsive/commit/e3781d208f7d7528add58b9b69fb998fe8f1e94e) diff (@contra) 121 | - [#108](https://github.com/contra/react-responsive/pull/108) fix PropTypes warnings, fix react-addons-test-utils deprecation, fix … (@modosc) 122 | - [49919d0](https://github.com/contra/react-responsive/commit/49919d09b7a4e984873b570132ada5554300f071) fix PropTypes warnings, fix react-addons-test-utils deprecation, fix eslint to work with test/ 123 | - [9957f24](https://github.com/contra/react-responsive/commit/9957f2445bd4d16b8d2ae1ae8a335dc2c95d476f) 1.3.2 (@contra) 124 | 125 | ### v1.3.2 (2017/07/14 14:47 +00:00) 126 | - [a595593](https://github.com/contra/react-responsive/commit/a595593f413b5012de57f8ca7eabec5490a7426c) 1.3.2 (@contra) 127 | - [516f270](https://github.com/contra/react-responsive/commit/516f2703dd4f35611d60a399ebd61273140ff88e) merge (@contra) 128 | - [40fe34e](https://github.com/contra/react-responsive/commit/40fe34e003669f44692aedb054079126bedc5bc4) build (@contra) 129 | - [85ae4cd](https://github.com/contra/react-responsive/commit/85ae4cd10fb0ea98a313f4335590452893f329ad) build (@contra) 130 | - [69cde10](https://github.com/contra/react-responsive/commit/69cde106d817b3f4df7cbdd540ed27edfcc7f2d8) changes (@contra) 131 | - [#106](https://github.com/contra/react-responsive/pull/106) Fixing a memory leak. (@ncochard) 132 | - [00af280](https://github.com/contra/react-responsive/commit/00af280f57d979963d6c1d445e9c8c088ee03b82) 1.3.1 133 | - [1e8dcb9](https://github.com/contra/react-responsive/commit/1e8dcb9b790c4ce8cf24b96936f4d5760c3a3494) Created 'matchmediaquery' as a replacement for 'matchmedia'. 134 | - [6df7684](https://github.com/contra/react-responsive/commit/6df7684736797589245a643eb72e8e243dd987be) Fix for a memory leak. 135 | - [#102](https://github.com/contra/react-responsive/pull/102) Close #74 (@WRONGWAY4YOU) 136 | - [7877b80](https://github.com/contra/react-responsive/commit/7877b8003dc8f69f6350304c319daa3e35351aae) Merge branch 'master' into iss74 (@wrongway4you) 137 | - [374b290](https://github.com/contra/react-responsive/commit/374b290722e50c7bade5e136a08ad53671b7df4a) Close #74 (@wrongway4you) 138 | - [4156475](https://github.com/contra/react-responsive/commit/4156475e882fa3f8098991a6b713dd743b24a739) Merge branch 'remove-npm-bin-prefixes' (@wrongway4you) 139 | - [#101](https://github.com/contra/react-responsive/pull/101) Remove unneeded "$(npm bin)/" prefixes (@WRONGWAY4YOU) 140 | - [adfaf69](https://github.com/contra/react-responsive/commit/adfaf69be82b56f91c66da7b17735aa4faa901f5) Remove unneeded "$(npm bin)/" prefixes in `package.json` (@wrongway4you) 141 | - [#100](https://github.com/contra/react-responsive/pull/100) Document common use cases (@sonaye) 142 | - [b917322](https://github.com/contra/react-responsive/commit/b917322352dbb68939f2e1f140a89e4836dad4d4) Document common use cases (@sonaye) 143 | 144 | ### v1.3.0 (2017/05/09 01:13 +00:00) 145 | - [44a7bf8](https://github.com/contra/react-responsive/commit/44a7bf8bd6f4289c4a644d4d1cdefbc5b01523c2) 1.3.0 (@contra) 146 | - [#97](https://github.com/contra/react-responsive/pull/97) Add onChange and onChangeBefore callbacks (@hiddenboox) 147 | - [6cb52b1](https://github.com/contra/react-responsive/commit/6cb52b15a452f1189bd4f89a4c5ce41bee21fe02) Add onBeforeChange callback (@hiddenboox) 148 | - [#96](https://github.com/contra/react-responsive/pull/96) Adding demo link to readme (@scottwarren) 149 | - [5836dfe](https://github.com/contra/react-responsive/commit/5836dfee1e85675ba1ea796a0e3cc75bba77d580) Adding link to readme (@scottwarren) 150 | - [2c6b00d](https://github.com/contra/react-responsive/commit/2c6b00da63091b3bada0b8fe6105e50e29b37fde) Add onChange callback (@d4rky-pl) 151 | 152 | ### v1.2.10 (2017/04/19 18:32 +00:00) 153 | - [ab7ff5c](https://github.com/contra/react-responsive/commit/ab7ff5cddcba1f22f3ace26dd777bbc530449c6c) 1.2.10 (@contra) 154 | - [4f8f916](https://github.com/contra/react-responsive/commit/4f8f91612d389b06cfed42723b3fe0b8e1a66f8c) build (@contra) 155 | 156 | ### v1.2.9 (2017/04/19 03:27 +00:00) 157 | - [07849af](https://github.com/contra/react-responsive/commit/07849afe0f7aee32c4db3dd4323bb93dbf23f1d1) 1.2.9 (@contra) 158 | - [#90](https://github.com/contra/react-responsive/pull/90) Replace proptypes in index file (@rmdort) 159 | - [a4a9120](https://github.com/contra/react-responsive/commit/a4a912073dff91401196fd8bc0ff41253573c49d) Removed React proptype in index (@rmdort) 160 | - [c1a8081](https://github.com/contra/react-responsive/commit/c1a8081809d91542f7ce77e13bec42cbc26cd067) Spellfix (@rmdort) 161 | - [0d7ffb6](https://github.com/contra/react-responsive/commit/0d7ffb6cf27027d7f1e64157a4d1b7ba45ffb0b1) Replace react proptypes (@rmdort) 162 | - [48c303f](https://github.com/contra/react-responsive/commit/48c303f7c47e1d553f4e4d5d639073e72f7822e7) build (@contra) 163 | 164 | ### v1.2.8 (2017/04/18 18:45 +00:00) 165 | - [4778c1e](https://github.com/contra/react-responsive/commit/4778c1e3793bffe15fd66cc0f7c8cb30c7cc59f0) 1.2.8 (@contra) 166 | - [#88](https://github.com/contra/react-responsive/pull/88) Added prop-type library for React 16 (@rmdort) 167 | - [7039ef6](https://github.com/contra/react-responsive/commit/7039ef6e30e409d83a8cf5e3a894cfdb136d3582) Added prop-type library for react 16 (@rmdort) 168 | - [#86](https://github.com/contra/react-responsive/pull/86) docs(readme): add install part (@kud) 169 | - [4665934](https://github.com/contra/react-responsive/commit/4665934ac824bca12c009a98f40c71bc8f47a081) docs(readme): add install part (@kud) 170 | - [8c53639](https://github.com/contra/react-responsive/commit/8c536392459673d46e0df3682adf42c8196b17e0) changelog (@contra) 171 | 172 | ### v1.2.7 (2017/03/14 16:17 +00:00) 173 | - [ee6b142](https://github.com/contra/react-responsive/commit/ee6b1429caa0fefd6e6f7c9313fe54fe13a61d82) 1.2.7 (@contra) 174 | - [#83](https://github.com/contra/react-responsive/pull/83) Add react 0.14.x as potential peer dep (@jesstelford) 175 | - [29266f0](https://github.com/contra/react-responsive/commit/29266f0db6598feaebcd4dc9dc907cdda3bafc2f) Peer dep on all react versions (@jesstelford) 176 | - [1007031](https://github.com/contra/react-responsive/commit/100703116f9649cf1e0e125a10c9384a9366ecd3) Add react 0.14.x as potential peer dep (@jesstelford) 177 | - [bc69299](https://github.com/contra/react-responsive/commit/bc692990d149f8a08bad4a12df78691816f75e81) changes (@contra) 178 | 179 | ### v1.2.6 (2017/01/19 03:06 +00:00) 180 | - [342621d](https://github.com/contra/react-responsive/commit/342621d0407ae2e590a33c280ec2ca39d8bf3e8e) 1.2.6 (@contra) 181 | - [#78](https://github.com/contra/react-responsive/pull/78) Removed babel-polyfill (@vjancik) 182 | - [ebfeec0](https://github.com/contra/react-responsive/commit/ebfeec0473b2ca8040dbe13e698fa08366a7808b) Removed babel-polyfill (@vjancik) 183 | - [9b91c9c](https://github.com/contra/react-responsive/commit/9b91c9cc341693a8282199edaed04a9c4b7a7f7a) #66 (@contra) 184 | - [56b794a](https://github.com/contra/react-responsive/commit/56b794a0fcac2a28c7bd87e7263ad2b93c52e348) dist fix (@contra) 185 | 186 | ### v1.2.4 (2016/11/24 00:51 +00:00) 187 | - [5e8ae33](https://github.com/contra/react-responsive/commit/5e8ae33d53e390193cf289b9f2ce7a6f95c47d90) 1.2.4 (@contra) 188 | - [708e250](https://github.com/contra/react-responsive/commit/708e25030963d967db7dcfa5b21f95bcd84832ed) only publish dist (@contra) 189 | - [2b36c54](https://github.com/contra/react-responsive/commit/2b36c54847f084e1830a1bcd1c885b6ab5102185) changelog (@contra) 190 | 191 | ### v1.2.3 (2016/11/23 00:26 +00:00) 192 | - [7d95ef1](https://github.com/contra/react-responsive/commit/7d95ef1d83e6acba43ac15aedda03eecdf66f6bf) 1.2.3 (@contra) 193 | - [404924f](https://github.com/contra/react-responsive/commit/404924ff302378a30dbb4f438b237c955b5528b0) changelog fix (@contra) 194 | 195 | ### v1.2.2 (2016/11/22 23:57 +00:00) 196 | - [d337ce3](https://github.com/contra/react-responsive/commit/d337ce35a00bbb383a656d7453e8b28a2b30ea87) 1.2.2 (@contra) 197 | - [#70](https://github.com/contra/react-responsive/pull/70) Wrap children if it's single-element array (@Instamotor-Labs) 198 | - [341fdec](https://github.com/contra/react-responsive/commit/341fdecc2c3f7f56529dc9941768690457a27c30) Wrap children if it's single-element array (@skydan) 199 | - [#65](https://github.com/contra/react-responsive/pull/65) Use ES2015 (@whatknight) 200 | - [1b07af3](https://github.com/contra/react-responsive/commit/1b07af3957c18a9aeaefdc7b989b75f29fb0ac5e) Clean up webpack file syntax. (@whatknight) 201 | - [b72e2c0](https://github.com/contra/react-responsive/commit/b72e2c032f24eefd33580774ec370ac50d720bf2) Update source to ES2015 syntax. (@whatknight) 202 | - [94dbf57](https://github.com/contra/react-responsive/commit/94dbf5717b0b4d4bc9ab2b934c0c1a1585c37b68) add gitbook stuff. (@whatknight) 203 | - [6aa759d](https://github.com/contra/react-responsive/commit/6aa759d66ee7571c4ad8f3265a29dc121635ec80) autofix lint errors (@whatknight) 204 | - [902d432](https://github.com/contra/react-responsive/commit/902d432d96ae7c9ff8012598a7fa75a89b3f8fd8) Use eslint instead of jshint. (@whatknight) 205 | - [9b22166](https://github.com/contra/react-responsive/commit/9b22166668118b077a8a3e1025a09f5909d0a985) Remove gulp. (@whatknight) 206 | - [2810466](https://github.com/contra/react-responsive/commit/28104666aafcf5d7a2babebe154cc52d10e186b7) Build using babel and webpack. (@whatknight) 207 | - [43b5741](https://github.com/contra/react-responsive/commit/43b5741e79aa0e79fe04174c30d442c2b0ca5706) update author, license, and urls. (@whatknight) 208 | - [477174c](https://github.com/contra/react-responsive/commit/477174c4e6738f9db913ee6f18924365bd9de019) 1.2.1 (@contra) 209 | - [f185c21](https://github.com/contra/react-responsive/commit/f185c21d763f05a11c9e4768ada0acda722b9f9e) rebuild (@contra) 210 | - [7895cde](https://github.com/contra/react-responsive/commit/7895cdee5fe3262c70aff29ab679044d9470f2b1) 1.2.0 (@contra) 211 | - [#64](https://github.com/contra/react-responsive/pull/64) Pass function as children. (@whatknight) 212 | - [5ce699b](https://github.com/contra/react-responsive/commit/5ce699bc02929f48da4a2cc32568d6905a0db346) Add space to readme. (@whatknight) 213 | - [b27da86](https://github.com/contra/react-responsive/commit/b27da8658410a4a069858f9d1cd0c684f9a2df96) Update docs with new feature. (@whatknight) 214 | - [80fddd9](https://github.com/contra/react-responsive/commit/80fddd971f9239ba885fa9892a80cd5081f7e401) Add ability to render with a function as the component child. (@whatknight) 215 | 216 | ### v1.1.5 (2016/09/15 04:13 +00:00) 217 | - [b6364b6](https://github.com/contra/react-responsive/commit/b6364b6157a9fca972cdb9170bed494b805948da) 1.1.5 (@contra) 218 | - [#62](https://github.com/contra/react-responsive/pull/62) Fix for Uncaught Invariant Violation #56. (@rhavill) 219 | - [3199bef](https://github.com/contra/react-responsive/commit/3199bef42f9d715701e276740bb997c2b474b51c) Added unit test to make sure MediaQuery render function can handle an empty array as children. 220 | - [fdb34e8](https://github.com/contra/react-responsive/commit/fdb34e8d830bc6d405b07afceca1dfb117808591) Fix for Uncaught Invariant Violation #56. Return null from render function when MediaQuery has no children. 221 | - [#61](https://github.com/contra/react-responsive/pull/61) Small fixes to indentation in README (@TSMMark) 222 | - [b75d5d8](https://github.com/contra/react-responsive/commit/b75d5d8a89604c294f8bf43f6ec74974421eae31) small fixes to indentation in README (@TSMMark) 223 | - [eac6444](https://github.com/contra/react-responsive/commit/eac6444d4059268b4744679edd209e484d222758) 1.1.4 (@contra) 224 | - [#58](https://github.com/contra/react-responsive/pull/58) Doesn't throw error with empty children (@nkov) 225 | - [df33365](https://github.com/contra/react-responsive/commit/df333655bdb658d2046289ac19e7153594cb8cd9) doesnt throw error with empty children (@nkov) 226 | 227 | ### v1.1.3 (2016/04/25 17:03 +00:00) 228 | - [ba1cb39](https://github.com/contra/react-responsive/commit/ba1cb39afa5259bda12ffe0dd7c57919c535397e) 1.1.3 (@contra) 229 | - [#53](https://github.com/contra/react-responsive/pull/53) Always wrap children if it's a string. (@whatknight) 230 | - [23f35cb](https://github.com/contra/react-responsive/commit/23f35cb2f4b9c906c267854077cb00f298c89e41) Always wrap children if it's a string. (@whatknight) 231 | - [02dd120](https://github.com/contra/react-responsive/commit/02dd120d5f22acc744edca34723a0ec9131dc8d3) add dev dep for react (@contra) 232 | - [#52](https://github.com/contra/react-responsive/pull/52) Add testing with jsdom. (@whatknight) 233 | - [#51](https://github.com/contra/react-responsive/pull/51) Fix bug where string would cause invariant error. (@whatknight) 234 | - [55707f1](https://github.com/contra/react-responsive/commit/55707f103ac9d53441943e80b96f0ece1b189ba5) Add testing with jsdom. (@whatknight) 235 | - [7dacb42](https://github.com/contra/react-responsive/commit/7dacb423884bc00aefc5579674f498af0eede79a) Fix bug where string would cause invariant error. (@whatknight) 236 | 237 | ### v1.1.2 (2016/04/08 05:07 +00:00) 238 | - [8d03ff0](https://github.com/contra/react-responsive/commit/8d03ff03e69d2c967a4c0c522523d0dc7af7c960) 1.1.2 (@contra) 239 | - [#47](https://github.com/contra/react-responsive/pull/47) Bump react peer dependency to allow v15 (@cesarandreu) 240 | - [87619fe](https://github.com/contra/react-responsive/commit/87619fe29ab529cd9e6b4e8a1a22dfc820b11a34) Bump react peer dependency to allow v15 (@cesarandreu) 241 | - [#46](https://github.com/contra/react-responsive/pull/46) Use API to examine number of children (@jdlehman) 242 | - [6c75c26](https://github.com/contra/react-responsive/commit/6c75c26970b2f4f58bdf947e379f487bcf660845) Use API to examine number of children (@jdlehman) 243 | - [c82c671](https://github.com/contra/react-responsive/commit/c82c67172b9dbd17dcdc6dbd918cb1568423661c) 1.1.1 (@contra) 244 | - [#39](https://github.com/contra/react-responsive/pull/39) fixed usage of Object.assign for older browsers (@pekeler) 245 | - [ce639c9](https://github.com/contra/react-responsive/commit/ce639c9b61944add8a9a51e2b0accbdf89e7dea2) fixed usage of Object.assign for older browsers (@pekeler) 246 | 247 | ### v1.1.0 (2016/01/10 23:53 +00:00) 248 | - [cfff39a](https://github.com/contra/react-responsive/commit/cfff39a73e1f8ffa48d8a74ac2a1d5816255e4ca) 1.1.0 (@contra) 249 | - [#37](https://github.com/contra/react-responsive/pull/37) Without lodash (@pekeler) 250 | - [ea47d21](https://github.com/contra/react-responsive/commit/ea47d21e49b91693c3aaecbc7af2706459dbfa0e) reverted spelling, dist (@pekeler) 251 | - [26e540d](https://github.com/contra/react-responsive/commit/26e540d8e718d842e363807e8fef1d07b6eda6c3) reverted spelling (@pekeler) 252 | - [1cd1947](https://github.com/contra/react-responsive/commit/1cd1947d71693b40e6afa784a93a5a52199d4128) readded old react versions (@pekeler) 253 | - [#38](https://github.com/contra/react-responsive/pull/38) reverted stupid spelling (@pekeler) 254 | - [996f15e](https://github.com/contra/react-responsive/commit/996f15eca95e735de7cdeb7c04c9eb3e8615f710) reverted stupid spelling (@pekeler) 255 | - [#36](https://github.com/contra/react-responsive/pull/36) Newer dependencies (@pekeler) 256 | - [83f461b](https://github.com/contra/react-responsive/commit/83f461bc6e2e7bdcd79c90e0c8064d850b452a1d) replaced lodash.omit with own implementation to reduce total file size (@pekeler) 257 | - [4534c1f](https://github.com/contra/react-responsive/commit/4534c1fe9666987a864e1d769635407d120fcb33) make npm test work (@pekeler) 258 | - [5cd9036](https://github.com/contra/react-responsive/commit/5cd9036e65c0f1b48c2268b73158e627013aade1) updated to latest dependecies, sample can't be easily backwards compatible with old react versions so we focus on the latest react (@pekeler) 259 | - [29d0d08](https://github.com/contra/react-responsive/commit/29d0d081a352f8723507245ea9f223a144895650) more readme info (@contra) 260 | 261 | ### v1.0.1 (2015/11/13 20:28 +00:00) 262 | - [b4ce24e](https://github.com/contra/react-responsive/commit/b4ce24ea423c062dfd4bace514b5614e119eb96c) 1.0.1 (@contra) 263 | - [#32](https://github.com/contra/react-responsive/pull/32) Add children to excluded keys (@ch2ch3) 264 | - [30b3f9f](https://github.com/contra/react-responsive/commit/30b3f9f8278bad15aad8b3fa8f393138c99b5610) Add children to excluded keys (@ch2ch3) 265 | 266 | ### v1.0.0 (2015/11/09 23:48 +00:00) 267 | - [a20d7f3](https://github.com/contra/react-responsive/commit/a20d7f3f43758400cb266a8aadab7b4dede843e6) 1.0.0 (@contra) 268 | - [#30](https://github.com/contra/react-responsive/pull/30) Do not require a component to wrap MediaQuery children (@jdlehman) 269 | - [27c09e5](https://github.com/contra/react-responsive/commit/27c09e565d98f902d798ffd2f7348f1b5d71d54f) Pass props to single child even if not using a wrapper (@jdlehman) 270 | - [56ecbb2](https://github.com/contra/react-responsive/commit/56ecbb26d014464b00fc1c0893b74a4e18b65225) Add documentation for component prop (@jdlehman) 271 | - [4543f17](https://github.com/contra/react-responsive/commit/4543f172a744402c5dd4a686acfad49baf9ee47a) Do not require a component to wrap MediaQuery children (@jdlehman) 272 | 273 | ### v0.0.10 (2015/10/08 22:50 +00:00) 274 | - [62af1d5](https://github.com/contra/react-responsive/commit/62af1d564767e7997af628b4764e330b8d29dae1) 0.0.10 (@contra) 275 | - [#28](https://github.com/contra/react-responsive/pull/28) support react 0.14 (@0x80) 276 | - [d1dc1e9](https://github.com/contra/react-responsive/commit/d1dc1e9d0a3c67427a368c9cc3f27f6493a4f2c6) support react 0.14 (@0x80) 277 | - [#26](https://github.com/contra/react-responsive/pull/26) Allow for react 0.14.0-rc1 as peer-dependency (@npasserini) 278 | - [b3e687d](https://github.com/contra/react-responsive/commit/b3e687d96fc6fbe28ddf421e6b7ca62e6434142e) Allow for react 0.14.0-rc1 as peer-dependency (@npasserini) 279 | 280 | ### v0.0.8 (2015/08/13 20:18 +00:00) 281 | - [969736a](https://github.com/contra/react-responsive/commit/969736a6c4583fbf41a30bfeb94b470f01af9a2f) 0.0.8 (@contra) 282 | - [#18](https://github.com/contra/react-responsive/pull/18) There is possible memory leak and bug leads to many listeners. It is … (@vavdav) 283 | - [d435265](https://github.com/contra/react-responsive/commit/d4352658b07718d7286b71603eb4fef790d8bf12) There is possible memory leak and bug leads to many listeners. It is necessary to remove listener before creating new object. (@vavdav) 284 | - [#17](https://github.com/contra/react-responsive/pull/17) Add support for React 0.14.0-beta1 (@frederickfogerty) 285 | - [45861f7](https://github.com/contra/react-responsive/commit/45861f7dea95a4b7486be7949b7e08bee24bed74) Update package.json (@frederickfogerty) 286 | - [84fb5a8](https://github.com/contra/react-responsive/commit/84fb5a849845c77ecdbd2a8c89524241a83f33b3) Add support for React 0.14.0-beta1 (@frederickfogerty) 287 | - [#16](https://github.com/contra/react-responsive/pull/16) Use `hyphenate-style-name` module instead of React internal (@rexxars) 288 | - [7046106](https://github.com/contra/react-responsive/commit/704610624d1ede95c0043e43a4be8fa6346315c3) Use `hyphenate-style-name` module instead of React internal (@rexxars) 289 | 290 | ### v0.0.7 (2015/07/22 06:22 +00:00) 291 | - [4050ab3](https://github.com/contra/react-responsive/commit/4050ab3041ea7075e2f59c5a5acd95451d648aaa) 0.0.7 (@contra) 292 | - [413b4e0](https://github.com/contra/react-responsive/commit/413b4e0c6b42b2f7ecf3d6a26566c4bc12d18c40) fix version range (@contra) 293 | - [e1dc870](https://github.com/contra/react-responsive/commit/e1dc870ef10573b063248b105788dcbe8c3953af) Update package.json (@contra) 294 | 295 | ### v0.0.6 (2015/03/30 17:12 +00:00) 296 | - [e9214ce](https://github.com/contra/react-responsive/commit/e9214cecfe74be5c5f9d8a7ba7d2e49c3221794c) 0.0.6 (@contra) 297 | - [7bcb9b5](https://github.com/contra/react-responsive/commit/7bcb9b5595f1a6b759b2231717b97cfe4a111630) fix linting (@contra) 298 | - [#12](https://github.com/contra/react-responsive/pull/12) Provide more flexible React peer dependency range (@colindresj) 299 | - [7db99e3](https://github.com/contra/react-responsive/commit/7db99e321db4f4c24b7da759bb4247658208ec2f) Provide more flexible React peer dependency range (@colindresj) 300 | - [#11](https://github.com/contra/react-responsive/pull/11) switch to matchmedia module for client/server abstraction (@phated) 301 | - [7d05ab6](https://github.com/contra/react-responsive/commit/7d05ab60e7feb53d118ea94f92e5103bdae08627) change names to MediaQuery and add `all` type (@phated) 302 | - [39ab71d](https://github.com/contra/react-responsive/commit/39ab71d2f60a238ae3ac78bc485f804f2e2fc07e) add type property (@phated) 303 | - [6c6054a](https://github.com/contra/react-responsive/commit/6c6054a48df4620c301f31ffe6e456f0a2000142) update readme (@phated) 304 | - [48e6c5d](https://github.com/contra/react-responsive/commit/48e6c5d6c3b8360603f2aeabb599b3c601cb74b9) update reactify, add example, use React.PropTypes.shape to define values (@phated) 305 | - [759154b](https://github.com/contra/react-responsive/commit/759154bfb098aed3be707086d0448ec39cc42ffe) switch to matchmedia module for client/server abstraction (@phated) 306 | 307 | ### v0.0.5 (2015/02/17 23:42 +00:00) 308 | - [72f4e25](https://github.com/contra/react-responsive/commit/72f4e250a311dfae0e2de95de6ae337a6a67cc9b) 0.0.5 (@contra) 309 | - [acef7f0](https://github.com/contra/react-responsive/commit/acef7f0a437cba4c23e72e9c4e6bbf4bb0c6ccf9) lint fixes (@contra) 310 | - [#10](https://github.com/contra/react-responsive/pull/10) fix usage of idiomatic react props (@ChrisSki) 311 | - [27e9f25](https://github.com/contra/react-responsive/commit/27e9f25191bc119a11d6d3a1c2ae3ed22deb1b89) remove propTypes: types (@ChrisSki) 312 | - [6f4b364](https://github.com/contra/react-responsive/commit/6f4b364718b3e031c24aff7dcd5f08419760f8a3) actually remove types this time (@ChrisSki) 313 | - [dcdea6a](https://github.com/contra/react-responsive/commit/dcdea6a30efe29fa3fbc2b6e90c3164e29dcf0e1) remove types prop (@ChrisSki) 314 | - [207a385](https://github.com/contra/react-responsive/commit/207a385ce17b2e21d22206d6dbfb9e09594c8c9b) fix usage of idiomatic react props (@ChrisSki) 315 | 316 | ### v0.0.4 (2015/02/09 09:15 +00:00) 317 | - [4f91d06](https://github.com/contra/react-responsive/commit/4f91d063f1d4b3f739e261aa54d090a5bb5cb402) 0.0.4 (@contra) 318 | - [609e3ae](https://github.com/contra/react-responsive/commit/609e3ae14dcbb8d0d99337c54ffbaba5514e77be) fix linter (@contra) 319 | - [#9](https://github.com/contra/react-responsive/pull/9) mergeInto removed and window checked (@fvitullo) 320 | - [c9eef42](https://github.com/contra/react-responsive/commit/c9eef42c24bf584e2bdc44150351d21d6db3ae1e) fixes #7 321 | - [26f2e95](https://github.com/contra/react-responsive/commit/26f2e95b811ae4b81bc7654723b9d8fc57fc8e50) mergeInto replaced with object-assign 322 | 323 | ### v0.0.3 (2015/02/04 01:12 +00:00) 324 | - [dcdb812](https://github.com/contra/react-responsive/commit/dcdb81278f20ede8e8e51fae07c8182ddd149cc3) 0.0.3 (@contra) 325 | - [33fbeff](https://github.com/contra/react-responsive/commit/33fbeff74c3388d14765f8ee5a1125a09b676d8a) closes #6 (@contra) 326 | 327 | ### v0.0.2 (2015/01/27 20:11 +00:00) 328 | - [085d2f3](https://github.com/contra/react-responsive/commit/085d2f353d0d0457359c199381f152796c5e155c) 0.0.2 (@contra) 329 | - [f5674b6](https://github.com/contra/react-responsive/commit/f5674b602f575f9c50e1a37f0cbdd6ede2216fec) react 0.12 (@contra) 330 | - [d6c4a4b](https://github.com/contra/react-responsive/commit/d6c4a4b29529a53e0a0c44358c23195dd0314f84) readme (@contra) 331 | - [d713f0b](https://github.com/contra/react-responsive/commit/d713f0bf4c19bb6cdc54ec23c9dcb1d5d57f8071) docs (@contra) 332 | - [af44f6c](https://github.com/contra/react-responsive/commit/af44f6c4914a62ca5fadbb770ab7c9b533eb294d) respond to prop changes (@contra) 333 | - [1413782](https://github.com/contra/react-responsive/commit/14137828b3ea46d6d6fad317cd80550142afa949) basically done (@contra) 334 | - [ec2ed95](https://github.com/contra/react-responsive/commit/ec2ed950203fa79d63a2b97cd24e2147d95df56c) start on js -> mq thing (@contra) 335 | - [c145e0b](https://github.com/contra/react-responsive/commit/c145e0b1c72c331033ce50da632cc3392914dd0f) fixdemo (@contra) 336 | - [ef59366](https://github.com/contra/react-responsive/commit/ef59366b7bc5482286978db358344875591ab200) demo (@contra) 337 | - [8c08276](https://github.com/contra/react-responsive/commit/8c08276194109441d5766e83fe5d455d0a5dc9c1) yo (@contra) 338 | - [891ed6e](https://github.com/contra/react-responsive/commit/891ed6ed57eb89c1de4b03d52519269f6cbac9e9) fix readme (@contra) 339 | - [dc3fb1b](https://github.com/contra/react-responsive/commit/dc3fb1bdaf6d5f4f080a59c7981f760f9cb5ef13) initial (@contra) 340 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 Fractal 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-responsive [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] 2 | 3 | ## Information 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
Packagereact-responsive
DescriptionMedia queries in react for responsive design
Browser Version>= IE6*
Demo
22 | 23 | The best supported, easiest to use react media query module. 24 | 25 | ## Install 26 | 27 | ```console 28 | $ npm install react-responsive --save 29 | ``` 30 | 31 | ## Example Usage 32 | 33 | ### With Hooks 34 | 35 | This feature is available on the 8.0.0-beta branch, and will go stable very soon! 36 | 37 | ```jsx 38 | import React from 'react' 39 | import { useMediaQuery } from 'react-responsive' 40 | 41 | const Example = () => { 42 | const isDesktopOrLaptop = useMediaQuery({ 43 | query: '(min-device-width: 1224px)' 44 | }) 45 | const isBigScreen = useMediaQuery({ query: '(min-device-width: 1824px)' }) 46 | const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' }) 47 | const isTabletOrMobileDevice = useMediaQuery({ 48 | query: '(max-device-width: 1224px)' 49 | }) 50 | const isPortrait = useMediaQuery({ query: '(orientation: portrait)' }) 51 | const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' }) 52 | 53 | return ( 54 |
55 |

Device Test!

56 | {isDesktopOrLaptop && <> 57 |

You are a desktop or laptop

58 | {isBigScreen &&

You also have a huge screen

} 59 | {isTabletOrMobile &&

You are sized like a tablet or mobile phone though

} 60 | } 61 | {isTabletOrMobileDevice &&

You are a tablet or mobile phone

} 62 |

Your are in {isPortrait ? 'portrait' : 'landscape'} orientation

63 | {isRetina &&

You are retina

} 64 |
65 | ) 66 | } 67 | ``` 68 | 69 | ### With Components 70 | 71 | ```jsx 72 | import MediaQuery from 'react-responsive' 73 | 74 | const Example = () => ( 75 |
76 |

Device Test!

77 | 78 |

You are a desktop or laptop

79 | 80 |

You also have a huge screen

81 | 82 | 83 | 84 | {/* You can also use a function (render prop) as a child */} 85 | {(matches) => 86 | matches 87 | ?

You are retina

88 | :

You are not retina

89 | } 90 | 91 |
92 | ) 93 | ``` 94 | 95 | ## API 96 | 97 | ### Using Properties 98 | 99 | To make things more idiomatic to react, you can use camel-cased shorthands to construct media queries. 100 | 101 | For a list of all possible shorthands and value types see https://github.com/contra/react-responsive/blob/master/src/mediaQuery.js#L9. 102 | 103 | Any numbers given as shorthand will be expanded to px (`1234` will become `'1234px'`). 104 | 105 | The CSS media queries in the example above could be constructed like this: 106 | 107 | ```jsx 108 | import React from 'react' 109 | import { useMediaQuery } from 'react-responsive' 110 | 111 | const Example = () => { 112 | const isDesktopOrLaptop = useMediaQuery({ minDeviceWidth: 1224 }) 113 | const isBigScreen = useMediaQuery({ minDeviceWidth: 1824 }) 114 | const isTabletOrMobile = useMediaQuery({ maxWidth: 1224 }) 115 | const isTabletOrMobileDevice = useMediaQuery({ maxDeviceWidth: 1224 }) 116 | const isPortrait = useMediaQuery({ orientation: 'portrait' }) 117 | const isRetina = useMediaQuery({ minResolution: '2dppx' }) 118 | 119 | return ( 120 |
121 | ... 122 |
123 | ) 124 | } 125 | ``` 126 | 127 | ### Forcing a device with the `device` prop 128 | 129 | At times you may need to render components with different device settings than what gets automatically detected. This is especially useful in a Node environment where these settings can't be detected (SSR) or for testing. 130 | 131 | #### Possible Keys 132 | 133 | `orientation`, `scan`, `aspectRatio`, `deviceAspectRatio`, 134 | `height`, `deviceHeight`, `width`, `deviceWidth`, `color`, `colorIndex`, `monochrome`, 135 | `resolution` and `type` 136 | 137 | ##### Possible Types 138 | 139 | `type` can be one of: `all`, `grid`, `aural`, `braille`, `handheld`, `print`, `projection`, 140 | `screen`, `tty`, `tv` or `embossed` 141 | 142 | Note: The `device` property always applies, even when it can be detected (where window.matchMedia exists). 143 | 144 | ```jsx 145 | import { useMediaQuery } from 'react-responsive' 146 | 147 | const Example = () => { 148 | const isDesktopOrLaptop = useMediaQuery( 149 | { minDeviceWidth: 1224 }, 150 | { deviceWidth: 1600 } // `device` prop 151 | ) 152 | 153 | return ( 154 |
155 | {isDesktopOrLaptop && 156 |

157 | this will always get rendered even if device is shorter than 1224px, 158 | that's because we overrode device settings with 'deviceWidth: 1600'. 159 |

160 | } 161 |
162 | ) 163 | } 164 | ``` 165 | 166 | #### Supplying through Context 167 | 168 | You can also pass `device` to every `useMediaQuery` hook in the components tree through a React [Context](https://reactjs.org/docs/context.html). 169 | This should ease up server-side-rendering and testing in a Node environment, e.g: 170 | 171 | ##### Server-Side Rendering 172 | 173 | ```jsx 174 | import { Context as ResponsiveContext } from 'react-responsive' 175 | import { renderToString } from 'react-dom/server' 176 | import App from './App' 177 | 178 | ... 179 | // Context is just a regular React Context component, it accepts a `value` prop to be passed to consuming components 180 | const mobileApp = renderToString( 181 | 182 | 183 | 184 | ) 185 | ... 186 | ``` 187 | 188 | ##### Testing 189 | 190 | ```jsx 191 | import { Context as ResponsiveContext } from 'react-responsive' 192 | import { render } from '@testing-library/react' 193 | import ProductsListing from './ProductsListing' 194 | 195 | describe('ProductsListing', () => { 196 | test('matches the snapshot', () => { 197 | const { container: mobile } = render( 198 | 199 | 200 | 201 | ) 202 | expect(mobile).toMatchSnapshot() 203 | 204 | const { container: desktop } = render( 205 | 206 | 207 | 208 | ) 209 | expect(desktop).toMatchSnapshot() 210 | }) 211 | }) 212 | ``` 213 | 214 | Note that if anything has a `device` prop passed in it will take precedence over the one from context. 215 | 216 | ## Easy Mode 217 | 218 | That's it! Now you can create your application specific breakpoints and reuse them easily. Here is an example: 219 | 220 | ```jsx 221 | import { useMediaQuery } from 'react-responsive' 222 | 223 | const Desktop = ({ children }) => { 224 | const isDesktop = useMediaQuery({ minWidth: 992 }) 225 | return isDesktop ? children : null 226 | } 227 | const Tablet = ({ children }) => { 228 | const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 991 }) 229 | return isTablet ? children : null 230 | } 231 | const Mobile = ({ children }) => { 232 | const isMobile = useMediaQuery({ maxWidth: 767 }) 233 | return isMobile ? children : null 234 | } 235 | const Default = ({ children }) => { 236 | const isNotMobile = useMediaQuery({ minWidth: 768 }) 237 | return isNotMobile ? children : null 238 | } 239 | 240 | const Example = () => ( 241 |
242 | Desktop or laptop 243 | Tablet 244 | Mobile 245 | Not mobile (desktop or laptop or tablet) 246 |
247 | ) 248 | 249 | export default Example 250 | ``` 251 | 252 | ## Browser Support 253 | 254 | ### Out of the box 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 |
Chrome9
Firefox (Gecko)6
MS EdgeAll
Internet Explorer10
Opera12.1
Safari5.1
282 | 283 | ### With Polyfills 284 | 285 | Pretty much everything. Check out these polyfills: 286 | 287 | - [matchMedia.js by Paul Irish](https://github.com/paulirish/matchMedia.js/) 288 | - [media-match (faster, but larger and lacking some features)](https://github.com/weblinc/media-match) 289 | 290 | [downloads-image]: http://img.shields.io/npm/dm/react-responsive.svg 291 | [npm-url]: https://npmjs.org/package/react-responsive 292 | [npm-image]: http://img.shields.io/npm/v/react-responsive.svg 293 | -------------------------------------------------------------------------------- /dist/react-responsive.js: -------------------------------------------------------------------------------- 1 | !function(root, factory) { 2 | "object" == typeof exports && "object" == typeof module ? module.exports = factory(require("react")) : "function" == typeof define && define.amd ? define([ "react" ], factory) : "object" == typeof exports ? exports.MediaQuery = factory(require("react")) : root.MediaQuery = factory(root.React); 3 | }("undefined" != typeof self ? self : this, function(__WEBPACK_EXTERNAL_MODULE_1__) { 4 | return function(modules) { 5 | function __webpack_require__(moduleId) { 6 | if (installedModules[moduleId]) return installedModules[moduleId].exports; 7 | var module = installedModules[moduleId] = { 8 | i: moduleId, 9 | l: !1, 10 | exports: {} 11 | }; 12 | return modules[moduleId].call(module.exports, module, module.exports, __webpack_require__), 13 | module.l = !0, module.exports; 14 | } 15 | var installedModules = {}; 16 | return __webpack_require__.m = modules, __webpack_require__.c = installedModules, 17 | __webpack_require__.d = function(exports, name, getter) { 18 | __webpack_require__.o(exports, name) || Object.defineProperty(exports, name, { 19 | configurable: !1, 20 | enumerable: !0, 21 | get: getter 22 | }); 23 | }, __webpack_require__.n = function(module) { 24 | var getter = module && module.__esModule ? function() { 25 | return module.default; 26 | } : function() { 27 | return module; 28 | }; 29 | return __webpack_require__.d(getter, "a", getter), getter; 30 | }, __webpack_require__.o = function(object, property) { 31 | return Object.prototype.hasOwnProperty.call(object, property); 32 | }, __webpack_require__.p = "", __webpack_require__(__webpack_require__.s = 6); 33 | }([ function(module, __webpack_exports__, __webpack_require__) { 34 | "use strict"; 35 | function _slicedToArray(arr, i) { 36 | return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); 37 | } 38 | function _nonIterableRest() { 39 | throw new TypeError("Invalid attempt to destructure non-iterable instance"); 40 | } 41 | function _iterableToArrayLimit(arr, i) { 42 | var _arr = [], _n = !0, _d = !1, _e = void 0; 43 | try { 44 | for (var _s, _i = arr[Symbol.iterator](); !(_n = (_s = _i.next()).done) && (_arr.push(_s.value), 45 | !i || _arr.length !== i); _n = !0) ; 46 | } catch (err) { 47 | _d = !0, _e = err; 48 | } finally { 49 | try { 50 | _n || null == _i.return || _i.return(); 51 | } finally { 52 | if (_d) throw _e; 53 | } 54 | } 55 | return _arr; 56 | } 57 | function _arrayWithHoles(arr) { 58 | if (Array.isArray(arr)) return arr; 59 | } 60 | var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(1), __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__), __WEBPACK_IMPORTED_MODULE_1_matchmediaquery__ = __webpack_require__(7), __WEBPACK_IMPORTED_MODULE_1_matchmediaquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_matchmediaquery__), __WEBPACK_IMPORTED_MODULE_2_hyphenate_style_name__ = __webpack_require__(2), __WEBPACK_IMPORTED_MODULE_3_shallow_equal_objects__ = __webpack_require__(9), __WEBPACK_IMPORTED_MODULE_3_shallow_equal_objects___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3_shallow_equal_objects__), __WEBPACK_IMPORTED_MODULE_4__toQuery__ = __webpack_require__(10), __WEBPACK_IMPORTED_MODULE_5__Context__ = __webpack_require__(5), makeQuery = function(settings) { 61 | return settings.query || Object(__WEBPACK_IMPORTED_MODULE_4__toQuery__.a)(settings); 62 | }, hyphenateKeys = function(obj) { 63 | if (!obj) return null; 64 | var keys = Object.keys(obj); 65 | return 0 === keys.length ? null : keys.reduce(function(result, key) { 66 | return result[Object(__WEBPACK_IMPORTED_MODULE_2_hyphenate_style_name__.a)(key)] = obj[key], 67 | result; 68 | }, {}); 69 | }, useIsUpdate = function() { 70 | var ref = __WEBPACK_IMPORTED_MODULE_0_react___default.a.useRef(!1); 71 | return __WEBPACK_IMPORTED_MODULE_0_react___default.a.useEffect(function() { 72 | ref.current = !0; 73 | }, []), ref.current; 74 | }, useDevice = function(deviceFromProps) { 75 | var deviceFromContext = __WEBPACK_IMPORTED_MODULE_0_react___default.a.useContext(__WEBPACK_IMPORTED_MODULE_5__Context__.a), getDevice = function() { 76 | return hyphenateKeys(deviceFromProps) || hyphenateKeys(deviceFromContext); 77 | }, _React$useState = __WEBPACK_IMPORTED_MODULE_0_react___default.a.useState(getDevice), _React$useState2 = _slicedToArray(_React$useState, 2), device = _React$useState2[0], setDevice = _React$useState2[1]; 78 | return __WEBPACK_IMPORTED_MODULE_0_react___default.a.useEffect(function() { 79 | var newDevice = getDevice(); 80 | __WEBPACK_IMPORTED_MODULE_3_shallow_equal_objects___default()(device, newDevice) || setDevice(newDevice); 81 | }, [ deviceFromProps, deviceFromContext ]), device; 82 | }, useQuery = function(settings) { 83 | var getQuery = function() { 84 | return makeQuery(settings); 85 | }, _React$useState3 = __WEBPACK_IMPORTED_MODULE_0_react___default.a.useState(getQuery), _React$useState4 = _slicedToArray(_React$useState3, 2), query = _React$useState4[0], setQuery = _React$useState4[1]; 86 | return __WEBPACK_IMPORTED_MODULE_0_react___default.a.useEffect(function() { 87 | var newQuery = getQuery(); 88 | query !== newQuery && setQuery(newQuery); 89 | }, [ settings ]), query; 90 | }, useMatchMedia = function(query, device) { 91 | var getMatchMedia = function() { 92 | return __WEBPACK_IMPORTED_MODULE_1_matchmediaquery___default()(query, device || {}, !!device); 93 | }, _React$useState5 = __WEBPACK_IMPORTED_MODULE_0_react___default.a.useState(getMatchMedia), _React$useState6 = _slicedToArray(_React$useState5, 2), mq = _React$useState6[0], setMq = _React$useState6[1], isUpdate = useIsUpdate(); 94 | return __WEBPACK_IMPORTED_MODULE_0_react___default.a.useEffect(function() { 95 | return isUpdate && setMq(getMatchMedia()), function() { 96 | mq.dispose(); 97 | }; 98 | }, [ query, device ]), mq; 99 | }, useMatches = function(mediaQuery) { 100 | var _React$useState7 = __WEBPACK_IMPORTED_MODULE_0_react___default.a.useState(mediaQuery.matches), _React$useState8 = _slicedToArray(_React$useState7, 2), matches = _React$useState8[0], setMatches = _React$useState8[1]; 101 | return __WEBPACK_IMPORTED_MODULE_0_react___default.a.useEffect(function() { 102 | var updateMatches = function() { 103 | setMatches(mediaQuery.matches); 104 | }; 105 | return mediaQuery.addListener(updateMatches), updateMatches(), function() { 106 | mediaQuery.removeListener(updateMatches); 107 | }; 108 | }, [ mediaQuery ]), matches; 109 | }, useMediaQuery = function(settings, device, onChange) { 110 | var deviceSettings = useDevice(device), query = useQuery(settings); 111 | if (!query) throw new Error("Invalid or missing MediaQuery!"); 112 | var mq = useMatchMedia(query, deviceSettings), matches = useMatches(mq), isUpdate = useIsUpdate(); 113 | return __WEBPACK_IMPORTED_MODULE_0_react___default.a.useEffect(function() { 114 | isUpdate && onChange && onChange(matches); 115 | }, [ matches ]), matches; 116 | }; 117 | __webpack_exports__.a = useMediaQuery; 118 | }, function(module, exports) { 119 | module.exports = __WEBPACK_EXTERNAL_MODULE_1__; 120 | }, function(module, __webpack_exports__, __webpack_require__) { 121 | "use strict"; 122 | function toHyphenLower(match) { 123 | return "-" + match.toLowerCase(); 124 | } 125 | function hyphenateStyleName(name) { 126 | if (cache.hasOwnProperty(name)) return cache[name]; 127 | var hName = name.replace(uppercasePattern, toHyphenLower); 128 | return cache[name] = msPattern.test(hName) ? "-" + hName : hName; 129 | } 130 | var uppercasePattern = /[A-Z]/g, msPattern = /^ms-/, cache = {}; 131 | __webpack_exports__.a = hyphenateStyleName; 132 | }, function(module, exports, __webpack_require__) { 133 | "use strict"; 134 | module.exports = __webpack_require__(13); 135 | }, function(module, exports, __webpack_require__) { 136 | "use strict"; 137 | module.exports = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"; 138 | }, function(module, __webpack_exports__, __webpack_require__) { 139 | "use strict"; 140 | var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(1), __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__), Context = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createContext(); 141 | __webpack_exports__.a = Context; 142 | }, function(module, __webpack_exports__, __webpack_require__) { 143 | "use strict"; 144 | Object.defineProperty(__webpack_exports__, "__esModule", { 145 | value: !0 146 | }); 147 | var __WEBPACK_IMPORTED_MODULE_0__useMediaQuery__ = __webpack_require__(0), __WEBPACK_IMPORTED_MODULE_1__Component__ = __webpack_require__(17), __WEBPACK_IMPORTED_MODULE_2__Context__ = __webpack_require__(5); 148 | __webpack_require__.d(__webpack_exports__, "default", function() { 149 | return __WEBPACK_IMPORTED_MODULE_1__Component__.a; 150 | }), __webpack_require__.d(__webpack_exports__, "useMediaQuery", function() { 151 | return __WEBPACK_IMPORTED_MODULE_0__useMediaQuery__.a; 152 | }), __webpack_require__.d(__webpack_exports__, "Context", function() { 153 | return __WEBPACK_IMPORTED_MODULE_2__Context__.a; 154 | }); 155 | }, function(module, exports, __webpack_require__) { 156 | "use strict"; 157 | function Mql(query, values, forceStatic) { 158 | function addListener(listener) { 159 | mql && mql.addListener(listener); 160 | } 161 | function removeListener(listener) { 162 | mql && mql.removeListener(listener); 163 | } 164 | function update(evt) { 165 | self.matches = evt.matches, self.media = evt.media; 166 | } 167 | function dispose() { 168 | mql && mql.removeListener(update); 169 | } 170 | var self = this; 171 | if (dynamicMatch && !forceStatic) { 172 | var mql = dynamicMatch.call(window, query); 173 | this.matches = mql.matches, this.media = mql.media, mql.addListener(update); 174 | } else this.matches = staticMatch(query, values), this.media = query; 175 | this.addListener = addListener, this.removeListener = removeListener, this.dispose = dispose; 176 | } 177 | function matchMedia(query, values, forceStatic) { 178 | return new Mql(query, values, forceStatic); 179 | } 180 | var staticMatch = __webpack_require__(8).match, dynamicMatch = "undefined" != typeof window ? window.matchMedia : null; 181 | module.exports = matchMedia; 182 | }, function(module, exports, __webpack_require__) { 183 | "use strict"; 184 | function matchQuery(mediaQuery, values) { 185 | return parseQuery(mediaQuery).some(function(query) { 186 | var inverse = query.inverse, typeMatch = "all" === query.type || values.type === query.type; 187 | if (typeMatch && inverse || !typeMatch && !inverse) return !1; 188 | var expressionsMatch = query.expressions.every(function(expression) { 189 | var feature = expression.feature, modifier = expression.modifier, expValue = expression.value, value = values[feature]; 190 | if (!value) return !1; 191 | switch (feature) { 192 | case "orientation": 193 | case "scan": 194 | return value.toLowerCase() === expValue.toLowerCase(); 195 | 196 | case "width": 197 | case "height": 198 | case "device-width": 199 | case "device-height": 200 | expValue = toPx(expValue), value = toPx(value); 201 | break; 202 | 203 | case "resolution": 204 | expValue = toDpi(expValue), value = toDpi(value); 205 | break; 206 | 207 | case "aspect-ratio": 208 | case "device-aspect-ratio": 209 | case "device-pixel-ratio": 210 | expValue = toDecimal(expValue), value = toDecimal(value); 211 | break; 212 | 213 | case "grid": 214 | case "color": 215 | case "color-index": 216 | case "monochrome": 217 | expValue = parseInt(expValue, 10) || 1, value = parseInt(value, 10) || 0; 218 | } 219 | switch (modifier) { 220 | case "min": 221 | return value >= expValue; 222 | 223 | case "max": 224 | return value <= expValue; 225 | 226 | default: 227 | return value === expValue; 228 | } 229 | }); 230 | return expressionsMatch && !inverse || !expressionsMatch && inverse; 231 | }); 232 | } 233 | function parseQuery(mediaQuery) { 234 | return mediaQuery.split(",").map(function(query) { 235 | query = query.trim(); 236 | var captures = query.match(RE_MEDIA_QUERY), modifier = captures[1], type = captures[2], expressions = captures[3] || "", parsed = {}; 237 | return parsed.inverse = !!modifier && "not" === modifier.toLowerCase(), parsed.type = type ? type.toLowerCase() : "all", 238 | expressions = expressions.match(/\([^\)]+\)/g) || [], parsed.expressions = expressions.map(function(expression) { 239 | var captures = expression.match(RE_MQ_EXPRESSION), feature = captures[1].toLowerCase().match(RE_MQ_FEATURE); 240 | return { 241 | modifier: feature[1], 242 | feature: feature[2], 243 | value: captures[2] 244 | }; 245 | }), parsed; 246 | }); 247 | } 248 | function toDecimal(ratio) { 249 | var numbers, decimal = Number(ratio); 250 | return decimal || (numbers = ratio.match(/^(\d+)\s*\/\s*(\d+)$/), decimal = numbers[1] / numbers[2]), 251 | decimal; 252 | } 253 | function toDpi(resolution) { 254 | var value = parseFloat(resolution); 255 | switch (String(resolution).match(RE_RESOLUTION_UNIT)[1]) { 256 | case "dpcm": 257 | return value / 2.54; 258 | 259 | case "dppx": 260 | return 96 * value; 261 | 262 | default: 263 | return value; 264 | } 265 | } 266 | function toPx(length) { 267 | var value = parseFloat(length); 268 | switch (String(length).match(RE_LENGTH_UNIT)[1]) { 269 | case "em": 270 | case "rem": 271 | return 16 * value; 272 | 273 | case "cm": 274 | return 96 * value / 2.54; 275 | 276 | case "mm": 277 | return 96 * value / 2.54 / 10; 278 | 279 | case "in": 280 | return 96 * value; 281 | 282 | case "pt": 283 | return 72 * value; 284 | 285 | case "pc": 286 | return 72 * value / 12; 287 | 288 | default: 289 | return value; 290 | } 291 | } 292 | exports.match = matchQuery, exports.parse = parseQuery; 293 | var RE_MEDIA_QUERY = /(?:(only|not)?\s*([^\s\(\)]+)(?:\s*and)?\s*)?(.+)?/i, RE_MQ_EXPRESSION = /\(\s*([^\s\:\)]+)\s*(?:\:\s*([^\s\)]+))?\s*\)/, RE_MQ_FEATURE = /^(?:(min|max)-)?(.+)/, RE_LENGTH_UNIT = /(em|rem|px|cm|mm|in|pt|pc)?$/, RE_RESOLUTION_UNIT = /(dpi|dpcm|dppx)?$/; 294 | }, function(module, exports, __webpack_require__) { 295 | "use strict"; 296 | function shallowEqualObjects(objA, objB) { 297 | if (objA === objB) return !0; 298 | if (!objA || !objB) return !1; 299 | var aKeys = Object.keys(objA), bKeys = Object.keys(objB), len = aKeys.length; 300 | if (bKeys.length !== len) return !1; 301 | for (var i = 0; i < len; i++) { 302 | var key = aKeys[i]; 303 | if (objA[key] !== objB[key]) return !1; 304 | } 305 | return !0; 306 | } 307 | module.exports = shallowEqualObjects; 308 | }, function(module, __webpack_exports__, __webpack_require__) { 309 | "use strict"; 310 | var __WEBPACK_IMPORTED_MODULE_0_hyphenate_style_name__ = __webpack_require__(2), __WEBPACK_IMPORTED_MODULE_1__mediaQuery__ = __webpack_require__(11), negate = function(cond) { 311 | return "not ".concat(cond); 312 | }, keyVal = function(k, v) { 313 | var realKey = Object(__WEBPACK_IMPORTED_MODULE_0_hyphenate_style_name__.a)(k); 314 | return "number" == typeof v && (v = "".concat(v, "px")), !0 === v ? realKey : !1 === v ? negate(realKey) : "(".concat(realKey, ": ").concat(v, ")"); 315 | }, join = function(conds) { 316 | return conds.join(" and "); 317 | }; 318 | __webpack_exports__.a = function(obj) { 319 | var rules = []; 320 | return Object.keys(__WEBPACK_IMPORTED_MODULE_1__mediaQuery__.a.all).forEach(function(k) { 321 | var v = obj[k]; 322 | null != v && rules.push(keyVal(k, v)); 323 | }), join(rules); 324 | }; 325 | }, function(module, __webpack_exports__, __webpack_require__) { 326 | "use strict"; 327 | function _objectSpread(target) { 328 | for (var i = 1; i < arguments.length; i++) { 329 | var source = null != arguments[i] ? arguments[i] : {}, ownKeys = Object.keys(source); 330 | "function" == typeof Object.getOwnPropertySymbols && (ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) { 331 | return Object.getOwnPropertyDescriptor(source, sym).enumerable; 332 | }))), ownKeys.forEach(function(key) { 333 | _defineProperty(target, key, source[key]); 334 | }); 335 | } 336 | return target; 337 | } 338 | function _defineProperty(obj, key, value) { 339 | return key in obj ? Object.defineProperty(obj, key, { 340 | value: value, 341 | enumerable: !0, 342 | configurable: !0, 343 | writable: !0 344 | }) : obj[key] = value, obj; 345 | } 346 | var __WEBPACK_IMPORTED_MODULE_0_prop_types__ = __webpack_require__(12), __WEBPACK_IMPORTED_MODULE_0_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_prop_types__), stringOrNumber = __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.oneOfType([ __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string, __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number ]), matchers = { 347 | orientation: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.oneOf([ "portrait", "landscape" ]), 348 | scan: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.oneOf([ "progressive", "interlace" ]), 349 | aspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string, 350 | deviceAspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string, 351 | height: stringOrNumber, 352 | deviceHeight: stringOrNumber, 353 | width: stringOrNumber, 354 | deviceWidth: stringOrNumber, 355 | color: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool, 356 | colorIndex: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool, 357 | monochrome: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool, 358 | resolution: stringOrNumber 359 | }, features = _objectSpread({ 360 | minAspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string, 361 | maxAspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string, 362 | minDeviceAspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string, 363 | maxDeviceAspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string, 364 | minHeight: stringOrNumber, 365 | maxHeight: stringOrNumber, 366 | minDeviceHeight: stringOrNumber, 367 | maxDeviceHeight: stringOrNumber, 368 | minWidth: stringOrNumber, 369 | maxWidth: stringOrNumber, 370 | minDeviceWidth: stringOrNumber, 371 | maxDeviceWidth: stringOrNumber, 372 | minColor: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number, 373 | maxColor: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number, 374 | minColorIndex: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number, 375 | maxColorIndex: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number, 376 | minMonochrome: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number, 377 | maxMonochrome: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number, 378 | minResolution: stringOrNumber, 379 | maxResolution: stringOrNumber 380 | }, matchers), types = { 381 | all: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool, 382 | grid: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool, 383 | aural: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool, 384 | braille: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool, 385 | handheld: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool, 386 | print: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool, 387 | projection: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool, 388 | screen: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool, 389 | tty: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool, 390 | tv: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool, 391 | embossed: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool 392 | }, all = _objectSpread({}, types, features); 393 | matchers.type = Object.keys(types), __webpack_exports__.a = { 394 | all: all, 395 | types: types, 396 | matchers: matchers, 397 | features: features 398 | }; 399 | }, function(module, exports, __webpack_require__) { 400 | var ReactIs = __webpack_require__(3); 401 | module.exports = __webpack_require__(14)(ReactIs.isElement, !0); 402 | }, function(module, exports, __webpack_require__) { 403 | "use strict"; 404 | !function() { 405 | function isValidElementType(type) { 406 | return "string" == typeof type || "function" == typeof type || type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || "object" == typeof type && null !== type && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE); 407 | } 408 | function typeOf(object) { 409 | if ("object" == typeof object && null !== object) { 410 | var $$typeof = object.$$typeof; 411 | switch ($$typeof) { 412 | case REACT_ELEMENT_TYPE: 413 | var type = object.type; 414 | switch (type) { 415 | case REACT_ASYNC_MODE_TYPE: 416 | case REACT_CONCURRENT_MODE_TYPE: 417 | case REACT_FRAGMENT_TYPE: 418 | case REACT_PROFILER_TYPE: 419 | case REACT_STRICT_MODE_TYPE: 420 | case REACT_SUSPENSE_TYPE: 421 | return type; 422 | 423 | default: 424 | var $$typeofType = type && type.$$typeof; 425 | switch ($$typeofType) { 426 | case REACT_CONTEXT_TYPE: 427 | case REACT_FORWARD_REF_TYPE: 428 | case REACT_PROVIDER_TYPE: 429 | return $$typeofType; 430 | 431 | default: 432 | return $$typeof; 433 | } 434 | } 435 | 436 | case REACT_LAZY_TYPE: 437 | case REACT_MEMO_TYPE: 438 | case REACT_PORTAL_TYPE: 439 | return $$typeof; 440 | } 441 | } 442 | } 443 | function isAsyncMode(object) { 444 | return hasWarnedAboutDeprecatedIsAsyncMode || (hasWarnedAboutDeprecatedIsAsyncMode = !0, 445 | lowPriorityWarning$1(!1, "The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")), 446 | isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE; 447 | } 448 | function isConcurrentMode(object) { 449 | return typeOf(object) === REACT_CONCURRENT_MODE_TYPE; 450 | } 451 | function isContextConsumer(object) { 452 | return typeOf(object) === REACT_CONTEXT_TYPE; 453 | } 454 | function isContextProvider(object) { 455 | return typeOf(object) === REACT_PROVIDER_TYPE; 456 | } 457 | function isElement(object) { 458 | return "object" == typeof object && null !== object && object.$$typeof === REACT_ELEMENT_TYPE; 459 | } 460 | function isForwardRef(object) { 461 | return typeOf(object) === REACT_FORWARD_REF_TYPE; 462 | } 463 | function isFragment(object) { 464 | return typeOf(object) === REACT_FRAGMENT_TYPE; 465 | } 466 | function isLazy(object) { 467 | return typeOf(object) === REACT_LAZY_TYPE; 468 | } 469 | function isMemo(object) { 470 | return typeOf(object) === REACT_MEMO_TYPE; 471 | } 472 | function isPortal(object) { 473 | return typeOf(object) === REACT_PORTAL_TYPE; 474 | } 475 | function isProfiler(object) { 476 | return typeOf(object) === REACT_PROFILER_TYPE; 477 | } 478 | function isStrictMode(object) { 479 | return typeOf(object) === REACT_STRICT_MODE_TYPE; 480 | } 481 | function isSuspense(object) { 482 | return typeOf(object) === REACT_SUSPENSE_TYPE; 483 | } 484 | Object.defineProperty(exports, "__esModule", { 485 | value: !0 486 | }); 487 | var hasSymbol = "function" == typeof Symbol && Symbol.for, REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for("react.element") : 60103, REACT_PORTAL_TYPE = hasSymbol ? Symbol.for("react.portal") : 60106, REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for("react.fragment") : 60107, REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for("react.strict_mode") : 60108, REACT_PROFILER_TYPE = hasSymbol ? Symbol.for("react.profiler") : 60114, REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for("react.provider") : 60109, REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for("react.context") : 60110, REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for("react.async_mode") : 60111, REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for("react.concurrent_mode") : 60111, REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for("react.forward_ref") : 60112, REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for("react.suspense") : 60113, REACT_MEMO_TYPE = hasSymbol ? Symbol.for("react.memo") : 60115, REACT_LAZY_TYPE = hasSymbol ? Symbol.for("react.lazy") : 60116, lowPriorityWarning = function() {}, printWarning = function(format) { 488 | for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) args[_key - 1] = arguments[_key]; 489 | var argIndex = 0, message = "Warning: " + format.replace(/%s/g, function() { 490 | return args[argIndex++]; 491 | }); 492 | "undefined" != typeof console && console.warn(message); 493 | try { 494 | throw new Error(message); 495 | } catch (x) {} 496 | }; 497 | lowPriorityWarning = function(condition, format) { 498 | if (void 0 === format) throw new Error("`lowPriorityWarning(condition, format, ...args)` requires a warning message argument"); 499 | if (!condition) { 500 | for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) args[_key2 - 2] = arguments[_key2]; 501 | printWarning.apply(void 0, [ format ].concat(args)); 502 | } 503 | }; 504 | var lowPriorityWarning$1 = lowPriorityWarning, AsyncMode = REACT_ASYNC_MODE_TYPE, ConcurrentMode = REACT_CONCURRENT_MODE_TYPE, ContextConsumer = REACT_CONTEXT_TYPE, ContextProvider = REACT_PROVIDER_TYPE, Element = REACT_ELEMENT_TYPE, ForwardRef = REACT_FORWARD_REF_TYPE, Fragment = REACT_FRAGMENT_TYPE, Lazy = REACT_LAZY_TYPE, Memo = REACT_MEMO_TYPE, Portal = REACT_PORTAL_TYPE, Profiler = REACT_PROFILER_TYPE, StrictMode = REACT_STRICT_MODE_TYPE, Suspense = REACT_SUSPENSE_TYPE, hasWarnedAboutDeprecatedIsAsyncMode = !1; 505 | exports.typeOf = typeOf, exports.AsyncMode = AsyncMode, exports.ConcurrentMode = ConcurrentMode, 506 | exports.ContextConsumer = ContextConsumer, exports.ContextProvider = ContextProvider, 507 | exports.Element = Element, exports.ForwardRef = ForwardRef, exports.Fragment = Fragment, 508 | exports.Lazy = Lazy, exports.Memo = Memo, exports.Portal = Portal, exports.Profiler = Profiler, 509 | exports.StrictMode = StrictMode, exports.Suspense = Suspense, exports.isValidElementType = isValidElementType, 510 | exports.isAsyncMode = isAsyncMode, exports.isConcurrentMode = isConcurrentMode, 511 | exports.isContextConsumer = isContextConsumer, exports.isContextProvider = isContextProvider, 512 | exports.isElement = isElement, exports.isForwardRef = isForwardRef, exports.isFragment = isFragment, 513 | exports.isLazy = isLazy, exports.isMemo = isMemo, exports.isPortal = isPortal, exports.isProfiler = isProfiler, 514 | exports.isStrictMode = isStrictMode, exports.isSuspense = isSuspense; 515 | }(); 516 | }, function(module, exports, __webpack_require__) { 517 | "use strict"; 518 | function emptyFunctionThatReturnsNull() { 519 | return null; 520 | } 521 | var ReactIs = __webpack_require__(3), assign = __webpack_require__(15), ReactPropTypesSecret = __webpack_require__(4), checkPropTypes = __webpack_require__(16), has = Function.call.bind(Object.prototype.hasOwnProperty), printWarning = function() {}; 522 | printWarning = function(text) { 523 | var message = "Warning: " + text; 524 | "undefined" != typeof console && console.error(message); 525 | try { 526 | throw new Error(message); 527 | } catch (x) {} 528 | }, module.exports = function(isValidElement, throwOnDirectAccess) { 529 | function getIteratorFn(maybeIterable) { 530 | var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]); 531 | if ("function" == typeof iteratorFn) return iteratorFn; 532 | } 533 | function is(x, y) { 534 | return x === y ? 0 !== x || 1 / x == 1 / y : x !== x && y !== y; 535 | } 536 | function PropTypeError(message) { 537 | this.message = message, this.stack = ""; 538 | } 539 | function createChainableTypeChecker(validate) { 540 | function checkType(isRequired, props, propName, componentName, location, propFullName, secret) { 541 | if (componentName = componentName || ANONYMOUS, propFullName = propFullName || propName, 542 | secret !== ReactPropTypesSecret) { 543 | if (throwOnDirectAccess) { 544 | var err = new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types"); 545 | throw err.name = "Invariant Violation", err; 546 | } 547 | if ("undefined" != typeof console) { 548 | var cacheKey = componentName + ":" + propName; 549 | !manualPropTypeCallCache[cacheKey] && manualPropTypeWarningCount < 3 && (printWarning("You are manually calling a React.PropTypes validation function for the `" + propFullName + "` prop on `" + componentName + "`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details."), 550 | manualPropTypeCallCache[cacheKey] = !0, manualPropTypeWarningCount++); 551 | } 552 | } 553 | return null == props[propName] ? isRequired ? new PropTypeError(null === props[propName] ? "The " + location + " `" + propFullName + "` is marked as required in `" + componentName + "`, but its value is `null`." : "The " + location + " `" + propFullName + "` is marked as required in `" + componentName + "`, but its value is `undefined`.") : null : validate(props, propName, componentName, location, propFullName); 554 | } 555 | var manualPropTypeCallCache = {}, manualPropTypeWarningCount = 0, chainedCheckType = checkType.bind(null, !1); 556 | return chainedCheckType.isRequired = checkType.bind(null, !0), chainedCheckType; 557 | } 558 | function createPrimitiveTypeChecker(expectedType) { 559 | function validate(props, propName, componentName, location, propFullName, secret) { 560 | var propValue = props[propName]; 561 | if (getPropType(propValue) !== expectedType) return new PropTypeError("Invalid " + location + " `" + propFullName + "` of type `" + getPreciseType(propValue) + "` supplied to `" + componentName + "`, expected `" + expectedType + "`."); 562 | return null; 563 | } 564 | return createChainableTypeChecker(validate); 565 | } 566 | function createArrayOfTypeChecker(typeChecker) { 567 | function validate(props, propName, componentName, location, propFullName) { 568 | if ("function" != typeof typeChecker) return new PropTypeError("Property `" + propFullName + "` of component `" + componentName + "` has invalid PropType notation inside arrayOf."); 569 | var propValue = props[propName]; 570 | if (!Array.isArray(propValue)) { 571 | return new PropTypeError("Invalid " + location + " `" + propFullName + "` of type `" + getPropType(propValue) + "` supplied to `" + componentName + "`, expected an array."); 572 | } 573 | for (var i = 0; i < propValue.length; i++) { 574 | var error = typeChecker(propValue, i, componentName, location, propFullName + "[" + i + "]", ReactPropTypesSecret); 575 | if (error instanceof Error) return error; 576 | } 577 | return null; 578 | } 579 | return createChainableTypeChecker(validate); 580 | } 581 | function createInstanceTypeChecker(expectedClass) { 582 | function validate(props, propName, componentName, location, propFullName) { 583 | if (!(props[propName] instanceof expectedClass)) { 584 | var expectedClassName = expectedClass.name || ANONYMOUS; 585 | return new PropTypeError("Invalid " + location + " `" + propFullName + "` of type `" + getClassName(props[propName]) + "` supplied to `" + componentName + "`, expected instance of `" + expectedClassName + "`."); 586 | } 587 | return null; 588 | } 589 | return createChainableTypeChecker(validate); 590 | } 591 | function createEnumTypeChecker(expectedValues) { 592 | function validate(props, propName, componentName, location, propFullName) { 593 | for (var propValue = props[propName], i = 0; i < expectedValues.length; i++) if (is(propValue, expectedValues[i])) return null; 594 | var valuesString = JSON.stringify(expectedValues, function(key, value) { 595 | return "symbol" === getPreciseType(value) ? String(value) : value; 596 | }); 597 | return new PropTypeError("Invalid " + location + " `" + propFullName + "` of value `" + String(propValue) + "` supplied to `" + componentName + "`, expected one of " + valuesString + "."); 598 | } 599 | return Array.isArray(expectedValues) ? createChainableTypeChecker(validate) : (printWarning(arguments.length > 1 ? "Invalid arguments supplied to oneOf, expected an array, got " + arguments.length + " arguments. A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z])." : "Invalid argument supplied to oneOf, expected an array."), 600 | emptyFunctionThatReturnsNull); 601 | } 602 | function createObjectOfTypeChecker(typeChecker) { 603 | function validate(props, propName, componentName, location, propFullName) { 604 | if ("function" != typeof typeChecker) return new PropTypeError("Property `" + propFullName + "` of component `" + componentName + "` has invalid PropType notation inside objectOf."); 605 | var propValue = props[propName], propType = getPropType(propValue); 606 | if ("object" !== propType) return new PropTypeError("Invalid " + location + " `" + propFullName + "` of type `" + propType + "` supplied to `" + componentName + "`, expected an object."); 607 | for (var key in propValue) if (has(propValue, key)) { 608 | var error = typeChecker(propValue, key, componentName, location, propFullName + "." + key, ReactPropTypesSecret); 609 | if (error instanceof Error) return error; 610 | } 611 | return null; 612 | } 613 | return createChainableTypeChecker(validate); 614 | } 615 | function createUnionTypeChecker(arrayOfTypeCheckers) { 616 | function validate(props, propName, componentName, location, propFullName) { 617 | for (var i = 0; i < arrayOfTypeCheckers.length; i++) { 618 | if (null == (0, arrayOfTypeCheckers[i])(props, propName, componentName, location, propFullName, ReactPropTypesSecret)) return null; 619 | } 620 | return new PropTypeError("Invalid " + location + " `" + propFullName + "` supplied to `" + componentName + "`."); 621 | } 622 | if (!Array.isArray(arrayOfTypeCheckers)) return printWarning("Invalid argument supplied to oneOfType, expected an instance of array."), 623 | emptyFunctionThatReturnsNull; 624 | for (var i = 0; i < arrayOfTypeCheckers.length; i++) { 625 | var checker = arrayOfTypeCheckers[i]; 626 | if ("function" != typeof checker) return printWarning("Invalid argument supplied to oneOfType. Expected an array of check functions, but received " + getPostfixForTypeWarning(checker) + " at index " + i + "."), 627 | emptyFunctionThatReturnsNull; 628 | } 629 | return createChainableTypeChecker(validate); 630 | } 631 | function createShapeTypeChecker(shapeTypes) { 632 | function validate(props, propName, componentName, location, propFullName) { 633 | var propValue = props[propName], propType = getPropType(propValue); 634 | if ("object" !== propType) return new PropTypeError("Invalid " + location + " `" + propFullName + "` of type `" + propType + "` supplied to `" + componentName + "`, expected `object`."); 635 | for (var key in shapeTypes) { 636 | var checker = shapeTypes[key]; 637 | if (checker) { 638 | var error = checker(propValue, key, componentName, location, propFullName + "." + key, ReactPropTypesSecret); 639 | if (error) return error; 640 | } 641 | } 642 | return null; 643 | } 644 | return createChainableTypeChecker(validate); 645 | } 646 | function createStrictShapeTypeChecker(shapeTypes) { 647 | function validate(props, propName, componentName, location, propFullName) { 648 | var propValue = props[propName], propType = getPropType(propValue); 649 | if ("object" !== propType) return new PropTypeError("Invalid " + location + " `" + propFullName + "` of type `" + propType + "` supplied to `" + componentName + "`, expected `object`."); 650 | var allKeys = assign({}, props[propName], shapeTypes); 651 | for (var key in allKeys) { 652 | var checker = shapeTypes[key]; 653 | if (!checker) return new PropTypeError("Invalid " + location + " `" + propFullName + "` key `" + key + "` supplied to `" + componentName + "`.\nBad object: " + JSON.stringify(props[propName], null, " ") + "\nValid keys: " + JSON.stringify(Object.keys(shapeTypes), null, " ")); 654 | var error = checker(propValue, key, componentName, location, propFullName + "." + key, ReactPropTypesSecret); 655 | if (error) return error; 656 | } 657 | return null; 658 | } 659 | return createChainableTypeChecker(validate); 660 | } 661 | function isNode(propValue) { 662 | switch (typeof propValue) { 663 | case "number": 664 | case "string": 665 | case "undefined": 666 | return !0; 667 | 668 | case "boolean": 669 | return !propValue; 670 | 671 | case "object": 672 | if (Array.isArray(propValue)) return propValue.every(isNode); 673 | if (null === propValue || isValidElement(propValue)) return !0; 674 | var iteratorFn = getIteratorFn(propValue); 675 | if (!iteratorFn) return !1; 676 | var step, iterator = iteratorFn.call(propValue); 677 | if (iteratorFn !== propValue.entries) { 678 | for (;!(step = iterator.next()).done; ) if (!isNode(step.value)) return !1; 679 | } else for (;!(step = iterator.next()).done; ) { 680 | var entry = step.value; 681 | if (entry && !isNode(entry[1])) return !1; 682 | } 683 | return !0; 684 | 685 | default: 686 | return !1; 687 | } 688 | } 689 | function isSymbol(propType, propValue) { 690 | return "symbol" === propType || !!propValue && ("Symbol" === propValue["@@toStringTag"] || "function" == typeof Symbol && propValue instanceof Symbol); 691 | } 692 | function getPropType(propValue) { 693 | var propType = typeof propValue; 694 | return Array.isArray(propValue) ? "array" : propValue instanceof RegExp ? "object" : isSymbol(propType, propValue) ? "symbol" : propType; 695 | } 696 | function getPreciseType(propValue) { 697 | if (void 0 === propValue || null === propValue) return "" + propValue; 698 | var propType = getPropType(propValue); 699 | if ("object" === propType) { 700 | if (propValue instanceof Date) return "date"; 701 | if (propValue instanceof RegExp) return "regexp"; 702 | } 703 | return propType; 704 | } 705 | function getPostfixForTypeWarning(value) { 706 | var type = getPreciseType(value); 707 | switch (type) { 708 | case "array": 709 | case "object": 710 | return "an " + type; 711 | 712 | case "boolean": 713 | case "date": 714 | case "regexp": 715 | return "a " + type; 716 | 717 | default: 718 | return type; 719 | } 720 | } 721 | function getClassName(propValue) { 722 | return propValue.constructor && propValue.constructor.name ? propValue.constructor.name : ANONYMOUS; 723 | } 724 | var ITERATOR_SYMBOL = "function" == typeof Symbol && Symbol.iterator, FAUX_ITERATOR_SYMBOL = "@@iterator", ANONYMOUS = "<>", ReactPropTypes = { 725 | array: createPrimitiveTypeChecker("array"), 726 | bool: createPrimitiveTypeChecker("boolean"), 727 | func: createPrimitiveTypeChecker("function"), 728 | number: createPrimitiveTypeChecker("number"), 729 | object: createPrimitiveTypeChecker("object"), 730 | string: createPrimitiveTypeChecker("string"), 731 | symbol: createPrimitiveTypeChecker("symbol"), 732 | any: function() { 733 | return createChainableTypeChecker(emptyFunctionThatReturnsNull); 734 | }(), 735 | arrayOf: createArrayOfTypeChecker, 736 | element: function() { 737 | function validate(props, propName, componentName, location, propFullName) { 738 | var propValue = props[propName]; 739 | if (!isValidElement(propValue)) { 740 | return new PropTypeError("Invalid " + location + " `" + propFullName + "` of type `" + getPropType(propValue) + "` supplied to `" + componentName + "`, expected a single ReactElement."); 741 | } 742 | return null; 743 | } 744 | return createChainableTypeChecker(validate); 745 | }(), 746 | elementType: function() { 747 | function validate(props, propName, componentName, location, propFullName) { 748 | var propValue = props[propName]; 749 | if (!ReactIs.isValidElementType(propValue)) { 750 | return new PropTypeError("Invalid " + location + " `" + propFullName + "` of type `" + getPropType(propValue) + "` supplied to `" + componentName + "`, expected a single ReactElement type."); 751 | } 752 | return null; 753 | } 754 | return createChainableTypeChecker(validate); 755 | }(), 756 | instanceOf: createInstanceTypeChecker, 757 | node: function() { 758 | function validate(props, propName, componentName, location, propFullName) { 759 | return isNode(props[propName]) ? null : new PropTypeError("Invalid " + location + " `" + propFullName + "` supplied to `" + componentName + "`, expected a ReactNode."); 760 | } 761 | return createChainableTypeChecker(validate); 762 | }(), 763 | objectOf: createObjectOfTypeChecker, 764 | oneOf: createEnumTypeChecker, 765 | oneOfType: createUnionTypeChecker, 766 | shape: createShapeTypeChecker, 767 | exact: createStrictShapeTypeChecker 768 | }; 769 | return PropTypeError.prototype = Error.prototype, ReactPropTypes.checkPropTypes = checkPropTypes, 770 | ReactPropTypes.resetWarningCache = checkPropTypes.resetWarningCache, ReactPropTypes.PropTypes = ReactPropTypes, 771 | ReactPropTypes; 772 | }; 773 | }, function(module, exports, __webpack_require__) { 774 | "use strict"; 775 | function toObject(val) { 776 | if (null === val || void 0 === val) throw new TypeError("Object.assign cannot be called with null or undefined"); 777 | return Object(val); 778 | } 779 | /* 780 | object-assign 781 | (c) Sindre Sorhus 782 | @license MIT 783 | */ 784 | var getOwnPropertySymbols = Object.getOwnPropertySymbols, hasOwnProperty = Object.prototype.hasOwnProperty, propIsEnumerable = Object.prototype.propertyIsEnumerable; 785 | module.exports = function() { 786 | try { 787 | if (!Object.assign) return !1; 788 | var test1 = new String("abc"); 789 | if (test1[5] = "de", "5" === Object.getOwnPropertyNames(test1)[0]) return !1; 790 | for (var test2 = {}, i = 0; i < 10; i++) test2["_" + String.fromCharCode(i)] = i; 791 | if ("0123456789" !== Object.getOwnPropertyNames(test2).map(function(n) { 792 | return test2[n]; 793 | }).join("")) return !1; 794 | var test3 = {}; 795 | return "abcdefghijklmnopqrst".split("").forEach(function(letter) { 796 | test3[letter] = letter; 797 | }), "abcdefghijklmnopqrst" === Object.keys(Object.assign({}, test3)).join(""); 798 | } catch (err) { 799 | return !1; 800 | } 801 | }() ? Object.assign : function(target, source) { 802 | for (var from, symbols, to = toObject(target), s = 1; s < arguments.length; s++) { 803 | from = Object(arguments[s]); 804 | for (var key in from) hasOwnProperty.call(from, key) && (to[key] = from[key]); 805 | if (getOwnPropertySymbols) { 806 | symbols = getOwnPropertySymbols(from); 807 | for (var i = 0; i < symbols.length; i++) propIsEnumerable.call(from, symbols[i]) && (to[symbols[i]] = from[symbols[i]]); 808 | } 809 | } 810 | return to; 811 | }; 812 | }, function(module, exports, __webpack_require__) { 813 | "use strict"; 814 | function checkPropTypes(typeSpecs, values, location, componentName, getStack) { 815 | for (var typeSpecName in typeSpecs) if (has(typeSpecs, typeSpecName)) { 816 | var error; 817 | try { 818 | if ("function" != typeof typeSpecs[typeSpecName]) { 819 | var err = Error((componentName || "React class") + ": " + location + " type `" + typeSpecName + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof typeSpecs[typeSpecName] + "`."); 820 | throw err.name = "Invariant Violation", err; 821 | } 822 | error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret); 823 | } catch (ex) { 824 | error = ex; 825 | } 826 | if (!error || error instanceof Error || printWarning((componentName || "React class") + ": type specification of " + location + " `" + typeSpecName + "` is invalid; the type checker function must return `null` or an `Error` but returned a " + typeof error + ". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."), 827 | error instanceof Error && !(error.message in loggedTypeFailures)) { 828 | loggedTypeFailures[error.message] = !0; 829 | var stack = getStack ? getStack() : ""; 830 | printWarning("Failed " + location + " type: " + error.message + (null != stack ? stack : "")); 831 | } 832 | } 833 | } 834 | var printWarning = function() {}, ReactPropTypesSecret = __webpack_require__(4), loggedTypeFailures = {}, has = Function.call.bind(Object.prototype.hasOwnProperty); 835 | printWarning = function(text) { 836 | var message = "Warning: " + text; 837 | "undefined" != typeof console && console.error(message); 838 | try { 839 | throw new Error(message); 840 | } catch (x) {} 841 | }, checkPropTypes.resetWarningCache = function() { 842 | loggedTypeFailures = {}; 843 | }, module.exports = checkPropTypes; 844 | }, function(module, __webpack_exports__, __webpack_require__) { 845 | "use strict"; 846 | function _objectWithoutProperties(source, excluded) { 847 | if (null == source) return {}; 848 | var key, i, target = _objectWithoutPropertiesLoose(source, excluded); 849 | if (Object.getOwnPropertySymbols) { 850 | var sourceSymbolKeys = Object.getOwnPropertySymbols(source); 851 | for (i = 0; i < sourceSymbolKeys.length; i++) key = sourceSymbolKeys[i], excluded.indexOf(key) >= 0 || Object.prototype.propertyIsEnumerable.call(source, key) && (target[key] = source[key]); 852 | } 853 | return target; 854 | } 855 | function _objectWithoutPropertiesLoose(source, excluded) { 856 | if (null == source) return {}; 857 | var key, i, target = {}, sourceKeys = Object.keys(source); 858 | for (i = 0; i < sourceKeys.length; i++) key = sourceKeys[i], excluded.indexOf(key) >= 0 || (target[key] = source[key]); 859 | return target; 860 | } 861 | function MediaQuery(_ref) { 862 | var children = _ref.children, device = _ref.device, onChange = _ref.onChange, settings = _objectWithoutProperties(_ref, [ "children", "device", "onChange" ]), matches = Object(__WEBPACK_IMPORTED_MODULE_0__useMediaQuery__.a)(settings, device, onChange); 863 | return "function" == typeof children ? children(matches) : matches ? children : null; 864 | } 865 | __webpack_exports__.a = MediaQuery; 866 | var __WEBPACK_IMPORTED_MODULE_0__useMediaQuery__ = __webpack_require__(0); 867 | } ]); 868 | }); 869 | //# sourceMappingURL=react-responsive.js.map -------------------------------------------------------------------------------- /dist/react-responsive.min.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.MediaQuery=t(require("react")):e.MediaQuery=t(e.React)}("undefined"!=typeof self?self:this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=4)}([function(e,t,n){"use strict";function r(e,t){return i(e)||a(e,t)||o()}function o(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}function a(e,t){var n=[],r=!0,o=!1,a=void 0;try{for(var i,c=e[Symbol.iterator]();!(r=(i=c.next()).done)&&(n.push(i.value),!t||n.length!==t);r=!0);}catch(e){o=!0,a=e}finally{try{r||null==c.return||c.return()}finally{if(o)throw a}}return n}function i(e){if(Array.isArray(e))return e}var c=n(1),u=n.n(c),s=n(5),f=n.n(s),l=n(2),p=n(7),m=n.n(p),d=n(8),h=n(3),v=function(e){return e.query||Object(d.a)(e)},b=function(e){if(!e)return null;var t=Object.keys(e);return 0===t.length?null:t.reduce(function(t,n){return t[Object(l.a)(n)]=e[n],t},{})},y=function(){var e=u.a.useRef(!1);return u.a.useEffect(function(){e.current=!0},[]),e.current},g=function(e){var t=u.a.useContext(h.a),n=function(){return b(e)||b(t)},o=u.a.useState(n),a=r(o,2),i=a[0],c=a[1];return u.a.useEffect(function(){var e=n();m()(i,e)||c(e)},[e,t]),i},x=function(e){var t=function(){return v(e)},n=u.a.useState(t),o=r(n,2),a=o[0],i=o[1];return u.a.useEffect(function(){var e=t();a!==e&&i(e)},[e]),a},O=function(e,t){var n=function(){return f()(e,t||{},!!t)},o=u.a.useState(n),a=r(o,2),i=a[0],c=a[1],s=y();return u.a.useEffect(function(){return s&&c(n()),function(){i.dispose()}},[e,t]),i},w=function(e){var t=u.a.useState(e.matches),n=r(t,2),o=n[0],a=n[1];return u.a.useEffect(function(){var t=function(){a(e.matches)};return e.addListener(t),t(),function(){e.removeListener(t)}},[e]),o},j=function(e,t,n){var r=g(t),o=x(e);if(!o)throw new Error("Invalid or missing MediaQuery!");var a=O(o,r),i=w(a),c=y();return u.a.useEffect(function(){c&&n&&n(i)},[i]),i};t.a=j},function(t,n){t.exports=e},function(e,t,n){"use strict";function r(e){return"-"+e.toLowerCase()}function o(e){if(c.hasOwnProperty(e))return c[e];var t=e.replace(a,r);return c[e]=i.test(t)?"-"+t:t}var a=/[A-Z]/g,i=/^ms-/,c={};t.a=o},function(e,t,n){"use strict";var r=n(1),o=n.n(r),a=o.a.createContext();t.a=a},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(0),o=n(13),a=n(3);n.d(t,"default",function(){return o.a}),n.d(t,"useMediaQuery",function(){return r.a}),n.d(t,"Context",function(){return a.a})},function(e,t,n){"use strict";function r(e,t,n){function r(e){f&&f.addListener(e)}function o(e){f&&f.removeListener(e)}function c(e){s.matches=e.matches,s.media=e.media}function u(){f&&f.removeListener(c)}var s=this;if(i&&!n){var f=i.call(window,e);this.matches=f.matches,this.media=f.media,f.addListener(c)}else this.matches=a(e,t),this.media=e;this.addListener=r,this.removeListener=o,this.dispose=u}function o(e,t,n){return new r(e,t,n)}var a=n(6).match,i="undefined"!=typeof window?window.matchMedia:null;e.exports=o},function(e,t,n){"use strict";function r(e,t){return o(e).some(function(e){var n=e.inverse,r="all"===e.type||t.type===e.type;if(r&&n||!r&&!n)return!1;var o=e.expressions.every(function(e){var n=e.feature,r=e.modifier,o=e.value,u=t[n];if(!u)return!1;switch(n){case"orientation":case"scan":return u.toLowerCase()===o.toLowerCase();case"width":case"height":case"device-width":case"device-height":o=c(o),u=c(u);break;case"resolution":o=i(o),u=i(u);break;case"aspect-ratio":case"device-aspect-ratio":case"device-pixel-ratio":o=a(o),u=a(u);break;case"grid":case"color":case"color-index":case"monochrome":o=parseInt(o,10)||1,u=parseInt(u,10)||0}switch(r){case"min":return u>=o;case"max":return u<=o;default:return u===o}});return o&&!n||!o&&n})}function o(e){return e.split(",").map(function(e){e=e.trim();var t=e.match(u),n=t[1],r=t[2],o=t[3]||"",a={};return a.inverse=!!n&&"not"===n.toLowerCase(),a.type=r?r.toLowerCase():"all",o=o.match(/\([^\)]+\)/g)||[],a.expressions=o.map(function(e){var t=e.match(s),n=t[1].toLowerCase().match(f);return{modifier:n[1],feature:n[2],value:t[2]}}),a})}function a(e){var t,n=Number(e);return n||(t=e.match(/^(\d+)\s*\/\s*(\d+)$/),n=t[1]/t[2]),n}function i(e){var t=parseFloat(e);switch(String(e).match(p)[1]){case"dpcm":return t/2.54;case"dppx":return 96*t;default:return t}}function c(e){var t=parseFloat(e);switch(String(e).match(l)[1]){case"em":case"rem":return 16*t;case"cm":return 96*t/2.54;case"mm":return 96*t/2.54/10;case"in":return 96*t;case"pt":return 72*t;case"pc":return 72*t/12;default:return t}}t.match=r,t.parse=o;var u=/(?:(only|not)?\s*([^\s\(\)]+)(?:\s*and)?\s*)?(.+)?/i,s=/\(\s*([^\s\:\)]+)\s*(?:\:\s*([^\s\)]+))?\s*\)/,f=/^(?:(min|max)-)?(.+)/,l=/(em|rem|px|cm|mm|in|pt|pc)?$/,p=/(dpi|dpcm|dppx)?$/},function(e,t,n){"use strict";function r(e,t){if(e===t)return!0;if(!e||!t)return!1;var n=Object.keys(e),r=Object.keys(t),o=n.length;if(r.length!==o)return!1;for(var a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}function o(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}function a(e){var t=e.children,n=e.device,o=e.onChange,a=r(e,["children","device","onChange"]),c=Object(i.a)(a,n,o);return"function"==typeof t?t(c):c?t:null}t.a=a;var i=n(0)}])}); 2 | //# sourceMappingURL=react-responsive.min.js.map -------------------------------------------------------------------------------- /dist/react-responsive.min.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///dist/react-responsive.min.js","webpack:///webpack/bootstrap ff9914a79e41174c9d59","webpack:///./src/useMediaQuery.js","webpack:///external {\"commonjs\":\"react\",\"commonjs2\":\"react\",\"amd\":\"react\",\"root\":\"React\"}","webpack:///./node_modules/hyphenate-style-name/index.js","webpack:///./src/Context.js","webpack:///./src/index.js","webpack:///./node_modules/matchmediaquery/index.js","webpack:///./node_modules/css-mediaquery/index.js","webpack:///./node_modules/shallow-equal/objects/index.js","webpack:///./src/toQuery.js","webpack:///./src/mediaQuery.js","webpack:///./node_modules/prop-types/index.js","webpack:///./node_modules/prop-types/factoryWithThrowingShims.js","webpack:///./node_modules/prop-types/lib/ReactPropTypesSecret.js","webpack:///./src/Component.js"],"names":["root","factory","exports","module","require","define","amd","self","this","__WEBPACK_EXTERNAL_MODULE_1__","modules","__webpack_require__","moduleId","installedModules","i","l","call","m","c","d","name","getter","o","Object","defineProperty","configurable","enumerable","get","n","__esModule","object","property","prototype","hasOwnProperty","p","s","__webpack_exports__","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_nonIterableRest","TypeError","_arr","_n","_d","_e","undefined","_s","_i","Symbol","iterator","next","done","push","value","length","err","Array","isArray","__WEBPACK_IMPORTED_MODULE_0_react__","__WEBPACK_IMPORTED_MODULE_0_react___default","__WEBPACK_IMPORTED_MODULE_1_matchmediaquery__","__WEBPACK_IMPORTED_MODULE_1_matchmediaquery___default","__WEBPACK_IMPORTED_MODULE_2_hyphenate_style_name__","__WEBPACK_IMPORTED_MODULE_3_shallow_equal_objects__","__WEBPACK_IMPORTED_MODULE_3_shallow_equal_objects___default","__WEBPACK_IMPORTED_MODULE_4__toQuery__","__WEBPACK_IMPORTED_MODULE_5__Context__","makeQuery","settings","query","toQuery","hyphenateKeys","obj","keys","reduce","result","key","hyphenate","useIsUpdate","ref","React","useRef","useEffect","current","useDevice","deviceFromProps","deviceFromContext","useContext","Context","getDevice","_React$useState","useState","_React$useState2","device","setDevice","newDevice","areObjectsEqual","useQuery","getQuery","_React$useState3","_React$useState4","setQuery","newQuery","useMatchMedia","getMatchMedia","matchMedia","_React$useState5","_React$useState6","mq","setMq","isUpdate","dispose","useMatches","mediaQuery","_React$useState7","matches","_React$useState8","setMatches","updateMatches","addListener","removeListener","useMediaQuery","onChange","deviceSettings","Error","toHyphenLower","match","toLowerCase","hyphenateStyleName","cache","hName","replace","uppercasePattern","msPattern","test","createContext","__WEBPACK_IMPORTED_MODULE_0__useMediaQuery__","__WEBPACK_IMPORTED_MODULE_1__Component__","__WEBPACK_IMPORTED_MODULE_2__Context__","Mql","values","forceStatic","listener","mql","update","evt","media","dynamicMatch","window","staticMatch","matchQuery","parseQuery","some","inverse","typeMatch","type","expressionsMatch","expressions","every","expression","feature","modifier","expValue","toPx","toDpi","toDecimal","parseInt","split","map","trim","captures","RE_MEDIA_QUERY","parsed","RE_MQ_EXPRESSION","RE_MQ_FEATURE","ratio","numbers","decimal","Number","resolution","parseFloat","String","RE_RESOLUTION_UNIT","RE_LENGTH_UNIT","parse","shallowEqualObjects","objA","objB","aKeys","bKeys","len","__WEBPACK_IMPORTED_MODULE_0_hyphenate_style_name__","__WEBPACK_IMPORTED_MODULE_1__mediaQuery__","negate","cond","concat","keyVal","k","v","realKey","join","conds","rules","all","forEach","_objectSpread","target","arguments","source","ownKeys","getOwnPropertySymbols","filter","sym","getOwnPropertyDescriptor","_defineProperty","writable","__WEBPACK_IMPORTED_MODULE_0_prop_types__","__WEBPACK_IMPORTED_MODULE_0_prop_types___default","stringOrNumber","PropTypes","oneOfType","string","number","matchers","orientation","oneOf","scan","aspectRatio","deviceAspectRatio","height","deviceHeight","width","deviceWidth","color","bool","colorIndex","monochrome","features","minAspectRatio","maxAspectRatio","minDeviceAspectRatio","maxDeviceAspectRatio","minHeight","maxHeight","minDeviceHeight","maxDeviceHeight","minWidth","maxWidth","minDeviceWidth","maxDeviceWidth","minColor","maxColor","minColorIndex","maxColorIndex","minMonochrome","maxMonochrome","minResolution","maxResolution","types","grid","aural","braille","handheld","print","projection","screen","tty","tv","embossed","emptyFunction","emptyFunctionWithReset","ReactPropTypesSecret","resetWarningCache","shim","props","propName","componentName","location","propFullName","secret","getShim","isRequired","ReactPropTypes","array","func","symbol","any","arrayOf","element","elementType","instanceOf","node","objectOf","shape","exact","checkPropTypes","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","MediaQuery","_ref","children"],"mappings":"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","file":"./dist/react-responsive.min.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"react\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"react\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"MediaQuery\"] = factory(require(\"react\"));\n\telse\n\t\troot[\"MediaQuery\"] = factory(root[\"React\"]);\n})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_1__) {\nreturn \n\n\n// WEBPACK FOOTER //\n// webpack/universalModuleDefinition","(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"react\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"react\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"MediaQuery\"] = factory(require(\"react\"));\n\telse\n\t\troot[\"MediaQuery\"] = factory(root[\"React\"]);\n})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_1__) {\nreturn /******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId]) {\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/ \t\t}\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\ti: moduleId,\n/******/ \t\t\tl: false,\n/******/ \t\t\texports: {}\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.l = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// define getter function for harmony exports\n/******/ \t__webpack_require__.d = function(exports, name, getter) {\n/******/ \t\tif(!__webpack_require__.o(exports, name)) {\n/******/ \t\t\tObject.defineProperty(exports, name, {\n/******/ \t\t\t\tconfigurable: false,\n/******/ \t\t\t\tenumerable: true,\n/******/ \t\t\t\tget: getter\n/******/ \t\t\t});\n/******/ \t\t}\n/******/ \t};\n/******/\n/******/ \t// getDefaultExport function for compatibility with non-harmony modules\n/******/ \t__webpack_require__.n = function(module) {\n/******/ \t\tvar getter = module && module.__esModule ?\n/******/ \t\t\tfunction getDefault() { return module['default']; } :\n/******/ \t\t\tfunction getModuleExports() { return module; };\n/******/ \t\t__webpack_require__.d(getter, 'a', getter);\n/******/ \t\treturn getter;\n/******/ \t};\n/******/\n/******/ \t// Object.prototype.hasOwnProperty.call\n/******/ \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"\";\n/******/\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(__webpack_require__.s = 4);\n/******/ })\n/************************************************************************/\n/******/ ([\n/* 0 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(1);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_matchmediaquery__ = __webpack_require__(5);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_matchmediaquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_matchmediaquery__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_hyphenate_style_name__ = __webpack_require__(2);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_shallow_equal_objects__ = __webpack_require__(7);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_shallow_equal_objects___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3_shallow_equal_objects__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__toQuery__ = __webpack_require__(8);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__Context__ = __webpack_require__(3);\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }\n\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); }\n\nfunction _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\n\n\n\n\nvar makeQuery = function makeQuery(settings) {\n return settings.query || Object(__WEBPACK_IMPORTED_MODULE_4__toQuery__[\"a\" /* default */])(settings);\n};\n\nvar hyphenateKeys = function hyphenateKeys(obj) {\n if (!obj) return null;\n var keys = Object.keys(obj);\n if (keys.length === 0) return null;\n return keys.reduce(function (result, key) {\n result[Object(__WEBPACK_IMPORTED_MODULE_2_hyphenate_style_name__[\"a\" /* default */])(key)] = obj[key];\n return result;\n }, {});\n};\n\nvar useIsUpdate = function useIsUpdate() {\n var ref = __WEBPACK_IMPORTED_MODULE_0_react___default.a.useRef(false);\n __WEBPACK_IMPORTED_MODULE_0_react___default.a.useEffect(function () {\n ref.current = true;\n }, []);\n return ref.current;\n};\n\nvar useDevice = function useDevice(deviceFromProps) {\n var deviceFromContext = __WEBPACK_IMPORTED_MODULE_0_react___default.a.useContext(__WEBPACK_IMPORTED_MODULE_5__Context__[\"a\" /* default */]);\n\n var getDevice = function getDevice() {\n return hyphenateKeys(deviceFromProps) || hyphenateKeys(deviceFromContext);\n };\n\n var _React$useState = __WEBPACK_IMPORTED_MODULE_0_react___default.a.useState(getDevice),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n device = _React$useState2[0],\n setDevice = _React$useState2[1];\n\n __WEBPACK_IMPORTED_MODULE_0_react___default.a.useEffect(function () {\n var newDevice = getDevice();\n\n if (!__WEBPACK_IMPORTED_MODULE_3_shallow_equal_objects___default()(device, newDevice)) {\n setDevice(newDevice);\n }\n }, [deviceFromProps, deviceFromContext]);\n return device;\n};\n\nvar useQuery = function useQuery(settings) {\n var getQuery = function getQuery() {\n return makeQuery(settings);\n };\n\n var _React$useState3 = __WEBPACK_IMPORTED_MODULE_0_react___default.a.useState(getQuery),\n _React$useState4 = _slicedToArray(_React$useState3, 2),\n query = _React$useState4[0],\n setQuery = _React$useState4[1];\n\n __WEBPACK_IMPORTED_MODULE_0_react___default.a.useEffect(function () {\n var newQuery = getQuery();\n\n if (query !== newQuery) {\n setQuery(newQuery);\n }\n }, [settings]);\n return query;\n};\n\nvar useMatchMedia = function useMatchMedia(query, device) {\n var getMatchMedia = function getMatchMedia() {\n return __WEBPACK_IMPORTED_MODULE_1_matchmediaquery___default()(query, device || {}, !!device);\n };\n\n var _React$useState5 = __WEBPACK_IMPORTED_MODULE_0_react___default.a.useState(getMatchMedia),\n _React$useState6 = _slicedToArray(_React$useState5, 2),\n mq = _React$useState6[0],\n setMq = _React$useState6[1];\n\n var isUpdate = useIsUpdate();\n __WEBPACK_IMPORTED_MODULE_0_react___default.a.useEffect(function () {\n if (isUpdate) {\n // skip on mounting, it has already been set\n setMq(getMatchMedia());\n }\n\n return function () {\n mq.dispose();\n };\n }, [query, device]);\n return mq;\n};\n\nvar useMatches = function useMatches(mediaQuery) {\n var _React$useState7 = __WEBPACK_IMPORTED_MODULE_0_react___default.a.useState(mediaQuery.matches),\n _React$useState8 = _slicedToArray(_React$useState7, 2),\n matches = _React$useState8[0],\n setMatches = _React$useState8[1];\n\n __WEBPACK_IMPORTED_MODULE_0_react___default.a.useEffect(function () {\n var updateMatches = function updateMatches() {\n setMatches(mediaQuery.matches);\n };\n\n mediaQuery.addListener(updateMatches);\n updateMatches();\n return function () {\n mediaQuery.removeListener(updateMatches);\n };\n }, [mediaQuery]);\n return matches;\n};\n\nvar useMediaQuery = function useMediaQuery(settings, device, onChange) {\n var deviceSettings = useDevice(device);\n var query = useQuery(settings);\n if (!query) throw new Error('Invalid or missing MediaQuery!');\n var mq = useMatchMedia(query, deviceSettings);\n var matches = useMatches(mq);\n var isUpdate = useIsUpdate();\n __WEBPACK_IMPORTED_MODULE_0_react___default.a.useEffect(function () {\n if (isUpdate && onChange) {\n onChange(matches);\n }\n }, [matches]);\n return matches;\n};\n\n/* harmony default export */ __webpack_exports__[\"a\"] = (useMediaQuery);\n\n/***/ }),\n/* 1 */\n/***/ (function(module, exports) {\n\nmodule.exports = __WEBPACK_EXTERNAL_MODULE_1__;\n\n/***/ }),\n/* 2 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n/* eslint-disable no-var, prefer-template */\nvar uppercasePattern = /[A-Z]/g\nvar msPattern = /^ms-/\nvar cache = {}\n\nfunction toHyphenLower(match) {\n return '-' + match.toLowerCase()\n}\n\nfunction hyphenateStyleName(name) {\n if (cache.hasOwnProperty(name)) {\n return cache[name]\n }\n\n var hName = name.replace(uppercasePattern, toHyphenLower)\n return (cache[name] = msPattern.test(hName) ? '-' + hName : hName)\n}\n\n/* harmony default export */ __webpack_exports__[\"a\"] = (hyphenateStyleName);\n\n\n/***/ }),\n/* 3 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(1);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);\n\nvar Context = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createContext();\n/* harmony default export */ __webpack_exports__[\"a\"] = (Context);\n\n/***/ }),\n/* 4 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nObject.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__useMediaQuery__ = __webpack_require__(0);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Component__ = __webpack_require__(13);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Context__ = __webpack_require__(3);\n/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return __WEBPACK_IMPORTED_MODULE_1__Component__[\"a\"]; });\n/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, \"useMediaQuery\", function() { return __WEBPACK_IMPORTED_MODULE_0__useMediaQuery__[\"a\"]; });\n/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, \"Context\", function() { return __WEBPACK_IMPORTED_MODULE_2__Context__[\"a\"]; });\n\n\n\n\n\n/***/ }),\n/* 5 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nvar staticMatch = __webpack_require__(6).match;\nvar dynamicMatch = typeof window !== 'undefined' ? window.matchMedia : null;\n\n// our fake MediaQueryList\nfunction Mql(query, values, forceStatic){\n var self = this;\n if(dynamicMatch && !forceStatic){\n var mql = dynamicMatch.call(window, query);\n this.matches = mql.matches;\n this.media = mql.media;\n // TODO: is there a time it makes sense to remove this listener?\n mql.addListener(update);\n } else {\n this.matches = staticMatch(query, values);\n this.media = query;\n }\n\n this.addListener = addListener;\n this.removeListener = removeListener;\n this.dispose = dispose;\n\n function addListener(listener){\n if(mql){\n mql.addListener(listener);\n }\n }\n\n function removeListener(listener){\n if(mql){\n mql.removeListener(listener);\n }\n }\n\n // update ourselves!\n function update(evt){\n self.matches = evt.matches;\n self.media = evt.media;\n }\n\n function dispose(){\n if(mql){\n mql.removeListener(update);\n }\n }\n}\n\nfunction matchMedia(query, values, forceStatic){\n return new Mql(query, values, forceStatic);\n}\n\nmodule.exports = matchMedia;\n\n\n/***/ }),\n/* 6 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n/*\nCopyright (c) 2014, Yahoo! Inc. All rights reserved.\nCopyrights licensed under the New BSD License.\nSee the accompanying LICENSE file for terms.\n*/\n\n\n\nexports.match = matchQuery;\nexports.parse = parseQuery;\n\n// -----------------------------------------------------------------------------\n\nvar RE_MEDIA_QUERY = /(?:(only|not)?\\s*([^\\s\\(\\)]+)(?:\\s*and)?\\s*)?(.+)?/i,\n RE_MQ_EXPRESSION = /\\(\\s*([^\\s\\:\\)]+)\\s*(?:\\:\\s*([^\\s\\)]+))?\\s*\\)/,\n RE_MQ_FEATURE = /^(?:(min|max)-)?(.+)/,\n RE_LENGTH_UNIT = /(em|rem|px|cm|mm|in|pt|pc)?$/,\n RE_RESOLUTION_UNIT = /(dpi|dpcm|dppx)?$/;\n\nfunction matchQuery(mediaQuery, values) {\n return parseQuery(mediaQuery).some(function (query) {\n var inverse = query.inverse;\n\n // Either the parsed or specified `type` is \"all\", or the types must be\n // equal for a match.\n var typeMatch = query.type === 'all' || values.type === query.type;\n\n // Quit early when `type` doesn't match, but take \"not\" into account.\n if ((typeMatch && inverse) || !(typeMatch || inverse)) {\n return false;\n }\n\n var expressionsMatch = query.expressions.every(function (expression) {\n var feature = expression.feature,\n modifier = expression.modifier,\n expValue = expression.value,\n value = values[feature];\n\n // Missing or falsy values don't match.\n if (!value) { return false; }\n\n switch (feature) {\n case 'orientation':\n case 'scan':\n return value.toLowerCase() === expValue.toLowerCase();\n\n case 'width':\n case 'height':\n case 'device-width':\n case 'device-height':\n expValue = toPx(expValue);\n value = toPx(value);\n break;\n\n case 'resolution':\n expValue = toDpi(expValue);\n value = toDpi(value);\n break;\n\n case 'aspect-ratio':\n case 'device-aspect-ratio':\n case /* Deprecated */ 'device-pixel-ratio':\n expValue = toDecimal(expValue);\n value = toDecimal(value);\n break;\n\n case 'grid':\n case 'color':\n case 'color-index':\n case 'monochrome':\n expValue = parseInt(expValue, 10) || 1;\n value = parseInt(value, 10) || 0;\n break;\n }\n\n switch (modifier) {\n case 'min': return value >= expValue;\n case 'max': return value <= expValue;\n default : return value === expValue;\n }\n });\n\n return (expressionsMatch && !inverse) || (!expressionsMatch && inverse);\n });\n}\n\nfunction parseQuery(mediaQuery) {\n return mediaQuery.split(',').map(function (query) {\n query = query.trim();\n\n var captures = query.match(RE_MEDIA_QUERY),\n modifier = captures[1],\n type = captures[2],\n expressions = captures[3] || '',\n parsed = {};\n\n parsed.inverse = !!modifier && modifier.toLowerCase() === 'not';\n parsed.type = type ? type.toLowerCase() : 'all';\n\n // Split expressions into a list.\n expressions = expressions.match(/\\([^\\)]+\\)/g) || [];\n\n parsed.expressions = expressions.map(function (expression) {\n var captures = expression.match(RE_MQ_EXPRESSION),\n feature = captures[1].toLowerCase().match(RE_MQ_FEATURE);\n\n return {\n modifier: feature[1],\n feature : feature[2],\n value : captures[2]\n };\n });\n\n return parsed;\n });\n}\n\n// -- Utilities ----------------------------------------------------------------\n\nfunction toDecimal(ratio) {\n var decimal = Number(ratio),\n numbers;\n\n if (!decimal) {\n numbers = ratio.match(/^(\\d+)\\s*\\/\\s*(\\d+)$/);\n decimal = numbers[1] / numbers[2];\n }\n\n return decimal;\n}\n\nfunction toDpi(resolution) {\n var value = parseFloat(resolution),\n units = String(resolution).match(RE_RESOLUTION_UNIT)[1];\n\n switch (units) {\n case 'dpcm': return value / 2.54;\n case 'dppx': return value * 96;\n default : return value;\n }\n}\n\nfunction toPx(length) {\n var value = parseFloat(length),\n units = String(length).match(RE_LENGTH_UNIT)[1];\n\n switch (units) {\n case 'em' : return value * 16;\n case 'rem': return value * 16;\n case 'cm' : return value * 96 / 2.54;\n case 'mm' : return value * 96 / 2.54 / 10;\n case 'in' : return value * 96;\n case 'pt' : return value * 72;\n case 'pc' : return value * 72 / 12;\n default : return value;\n }\n}\n\n\n/***/ }),\n/* 7 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n\nfunction shallowEqualObjects(objA, objB) {\n if (objA === objB) {\n return true;\n }\n\n if (!objA || !objB) {\n return false;\n }\n\n var aKeys = Object.keys(objA);\n var bKeys = Object.keys(objB);\n var len = aKeys.length;\n\n if (bKeys.length !== len) {\n return false;\n }\n\n for (var i = 0; i < len; i++) {\n var key = aKeys[i];\n\n if (objA[key] !== objB[key]) {\n return false;\n }\n }\n\n return true;\n}\n\nmodule.exports = shallowEqualObjects;\n\n\n/***/ }),\n/* 8 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_hyphenate_style_name__ = __webpack_require__(2);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__mediaQuery__ = __webpack_require__(9);\n\n\n\nvar negate = function negate(cond) {\n return \"not \".concat(cond);\n};\n\nvar keyVal = function keyVal(k, v) {\n var realKey = Object(__WEBPACK_IMPORTED_MODULE_0_hyphenate_style_name__[\"a\" /* default */])(k); // px shorthand\n\n if (typeof v === 'number') {\n v = \"\".concat(v, \"px\");\n }\n\n if (v === true) {\n return realKey;\n }\n\n if (v === false) {\n return negate(realKey);\n }\n\n return \"(\".concat(realKey, \": \").concat(v, \")\");\n};\n\nvar join = function join(conds) {\n return conds.join(' and ');\n};\n\n/* harmony default export */ __webpack_exports__[\"a\"] = (function (obj) {\n var rules = [];\n Object.keys(__WEBPACK_IMPORTED_MODULE_1__mediaQuery__[\"a\" /* default */].all).forEach(function (k) {\n var v = obj[k];\n\n if (v != null) {\n rules.push(keyVal(k, v));\n }\n });\n return join(rules);\n});\n\n/***/ }),\n/* 9 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_prop_types__ = __webpack_require__(10);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_prop_types__);\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\nvar stringOrNumber = __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.oneOfType([__WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string, __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number]); // properties that match media queries\n\nvar matchers = {\n orientation: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.oneOf(['portrait', 'landscape']),\n scan: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.oneOf(['progressive', 'interlace']),\n aspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string,\n deviceAspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string,\n height: stringOrNumber,\n deviceHeight: stringOrNumber,\n width: stringOrNumber,\n deviceWidth: stringOrNumber,\n color: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,\n colorIndex: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,\n monochrome: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,\n resolution: stringOrNumber // media features\n\n};\n\nvar features = _objectSpread({\n minAspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string,\n maxAspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string,\n minDeviceAspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string,\n maxDeviceAspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string,\n minHeight: stringOrNumber,\n maxHeight: stringOrNumber,\n minDeviceHeight: stringOrNumber,\n maxDeviceHeight: stringOrNumber,\n minWidth: stringOrNumber,\n maxWidth: stringOrNumber,\n minDeviceWidth: stringOrNumber,\n maxDeviceWidth: stringOrNumber,\n minColor: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number,\n maxColor: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number,\n minColorIndex: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number,\n maxColorIndex: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number,\n minMonochrome: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number,\n maxMonochrome: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number,\n minResolution: stringOrNumber,\n maxResolution: stringOrNumber\n}, matchers); // media types\n\n\nvar types = {\n all: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,\n grid: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,\n aural: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,\n braille: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,\n handheld: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,\n print: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,\n projection: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,\n screen: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,\n tty: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,\n tv: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,\n embossed: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool\n};\n\nvar all = _objectSpread({}, types, features); // add the type property\n\n\nmatchers.type = Object.keys(types);\n/* harmony default export */ __webpack_exports__[\"a\"] = ({\n all: all,\n types: types,\n matchers: matchers,\n features: features\n});\n\n/***/ }),\n/* 10 */\n/***/ (function(module, exports, __webpack_require__) {\n\n/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nif (false) {\n var ReactIs = require('react-is');\n\n // By explicitly using `prop-types` you are opting into new development behavior.\n // http://fb.me/prop-types-in-prod\n var throwOnDirectAccess = true;\n module.exports = require('./factoryWithTypeCheckers')(ReactIs.isElement, throwOnDirectAccess);\n} else {\n // By explicitly using `prop-types` you are opting into new production behavior.\n // http://fb.me/prop-types-in-prod\n module.exports = __webpack_require__(11)();\n}\n\n\n/***/ }),\n/* 11 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\n\nvar ReactPropTypesSecret = __webpack_require__(12);\n\nfunction emptyFunction() {}\nfunction emptyFunctionWithReset() {}\nemptyFunctionWithReset.resetWarningCache = emptyFunction;\n\nmodule.exports = function() {\n function shim(props, propName, componentName, location, propFullName, secret) {\n if (secret === ReactPropTypesSecret) {\n // It is still safe when called from React.\n return;\n }\n var err = new Error(\n 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +\n 'Use PropTypes.checkPropTypes() to call them. ' +\n 'Read more at http://fb.me/use-check-prop-types'\n );\n err.name = 'Invariant Violation';\n throw err;\n };\n shim.isRequired = shim;\n function getShim() {\n return shim;\n };\n // Important!\n // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.\n var ReactPropTypes = {\n array: shim,\n bool: shim,\n func: shim,\n number: shim,\n object: shim,\n string: shim,\n symbol: shim,\n\n any: shim,\n arrayOf: getShim,\n element: shim,\n elementType: shim,\n instanceOf: getShim,\n node: shim,\n objectOf: getShim,\n oneOf: getShim,\n oneOfType: getShim,\n shape: getShim,\n exact: getShim,\n\n checkPropTypes: emptyFunctionWithReset,\n resetWarningCache: emptyFunction\n };\n\n ReactPropTypes.PropTypes = ReactPropTypes;\n\n return ReactPropTypes;\n};\n\n\n/***/ }),\n/* 12 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\n\nvar ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';\n\nmodule.exports = ReactPropTypesSecret;\n\n\n/***/ }),\n/* 13 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n/* harmony export (immutable) */ __webpack_exports__[\"a\"] = MediaQuery;\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__useMediaQuery__ = __webpack_require__(0);\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\nfunction MediaQuery(_ref) {\n var children = _ref.children,\n device = _ref.device,\n onChange = _ref.onChange,\n settings = _objectWithoutProperties(_ref, [\"children\", \"device\", \"onChange\"]);\n\n var matches = Object(__WEBPACK_IMPORTED_MODULE_0__useMediaQuery__[\"a\" /* default */])(settings, device, onChange);\n\n if (typeof children === 'function') {\n return children(matches);\n }\n\n return matches ? children : null;\n}\n\n/***/ })\n/******/ ]);\n});\n\n\n// WEBPACK FOOTER //\n// dist/react-responsive.min.js"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 4);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap ff9914a79e41174c9d59","import React from 'react'\nimport matchMedia from 'matchmediaquery'\nimport hyphenate from 'hyphenate-style-name'\nimport areObjectsEqual from 'shallow-equal/objects'\nimport toQuery from './toQuery'\nimport Context from './Context'\n\nconst makeQuery = (settings) => settings.query || toQuery(settings)\n\nconst hyphenateKeys = (obj) => {\n if (!obj) return null\n const keys = Object.keys(obj)\n if (keys.length === 0) return null\n return keys.reduce((result, key) => {\n result[hyphenate(key)] = obj[key]\n return result\n }, {})\n}\n\nconst useIsUpdate = () => {\n const ref = React.useRef(false)\n\n React.useEffect(() => {\n ref.current = true\n }, [])\n\n return ref.current\n}\n\nconst useDevice = (deviceFromProps) => {\n const deviceFromContext = React.useContext(Context)\n const getDevice = () =>\n hyphenateKeys(deviceFromProps) || hyphenateKeys(deviceFromContext)\n const [ device, setDevice ] = React.useState(getDevice)\n\n React.useEffect(() => {\n const newDevice = getDevice()\n if (!areObjectsEqual(device, newDevice)) {\n setDevice(newDevice)\n }\n }, [ deviceFromProps, deviceFromContext ])\n\n return device\n}\n\nconst useQuery = (settings) => {\n const getQuery = () => makeQuery(settings)\n const [ query, setQuery ] = React.useState(getQuery)\n\n React.useEffect(() => {\n const newQuery = getQuery()\n if (query !== newQuery) {\n setQuery(newQuery)\n }\n }, [ settings ])\n\n return query\n}\n\nconst useMatchMedia = (query, device) => {\n const getMatchMedia = () => matchMedia(query, device || {}, !!device)\n const [ mq, setMq ] = React.useState(getMatchMedia)\n const isUpdate = useIsUpdate()\n\n React.useEffect(() => {\n if (isUpdate) {\n // skip on mounting, it has already been set\n setMq(getMatchMedia())\n }\n\n return () => {\n mq.dispose()\n }\n }, [ query, device ])\n\n return mq\n}\n\nconst useMatches = (mediaQuery) => {\n const [ matches, setMatches ] = React.useState(mediaQuery.matches)\n\n React.useEffect(() => {\n const updateMatches = () => {\n setMatches(mediaQuery.matches)\n }\n mediaQuery.addListener(updateMatches)\n updateMatches()\n\n return () => {\n mediaQuery.removeListener(updateMatches)\n }\n }, [ mediaQuery ])\n\n return matches\n}\n\nconst useMediaQuery = (settings, device, onChange) => {\n const deviceSettings = useDevice(device)\n const query = useQuery(settings)\n if (!query) throw new Error('Invalid or missing MediaQuery!')\n const mq = useMatchMedia(query, deviceSettings)\n const matches = useMatches(mq)\n const isUpdate = useIsUpdate()\n\n React.useEffect(() => {\n if (isUpdate && onChange) {\n onChange(matches)\n }\n }, [ matches ])\n\n return matches\n}\n\nexport default useMediaQuery\n\n\n\n// WEBPACK FOOTER //\n// ./src/useMediaQuery.js","module.exports = __WEBPACK_EXTERNAL_MODULE_1__;\n\n\n//////////////////\n// WEBPACK FOOTER\n// external {\"commonjs\":\"react\",\"commonjs2\":\"react\",\"amd\":\"react\",\"root\":\"React\"}\n// module id = 1\n// module chunks = 0","/* eslint-disable no-var, prefer-template */\nvar uppercasePattern = /[A-Z]/g\nvar msPattern = /^ms-/\nvar cache = {}\n\nfunction toHyphenLower(match) {\n return '-' + match.toLowerCase()\n}\n\nfunction hyphenateStyleName(name) {\n if (cache.hasOwnProperty(name)) {\n return cache[name]\n }\n\n var hName = name.replace(uppercasePattern, toHyphenLower)\n return (cache[name] = msPattern.test(hName) ? '-' + hName : hName)\n}\n\nexport default hyphenateStyleName\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/hyphenate-style-name/index.js\n// module id = 2\n// module chunks = 0","import React from 'react'\n\nconst Context = React.createContext()\n\nexport default Context\n\n\n\n// WEBPACK FOOTER //\n// ./src/Context.js","import useMediaQuery from './useMediaQuery'\nimport MediaQuery from './Component'\nimport Context from './Context'\n\nexport {\n MediaQuery as default,\n useMediaQuery,\n Context\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/index.js","'use strict';\n\nvar staticMatch = require('css-mediaquery').match;\nvar dynamicMatch = typeof window !== 'undefined' ? window.matchMedia : null;\n\n// our fake MediaQueryList\nfunction Mql(query, values, forceStatic){\n var self = this;\n if(dynamicMatch && !forceStatic){\n var mql = dynamicMatch.call(window, query);\n this.matches = mql.matches;\n this.media = mql.media;\n // TODO: is there a time it makes sense to remove this listener?\n mql.addListener(update);\n } else {\n this.matches = staticMatch(query, values);\n this.media = query;\n }\n\n this.addListener = addListener;\n this.removeListener = removeListener;\n this.dispose = dispose;\n\n function addListener(listener){\n if(mql){\n mql.addListener(listener);\n }\n }\n\n function removeListener(listener){\n if(mql){\n mql.removeListener(listener);\n }\n }\n\n // update ourselves!\n function update(evt){\n self.matches = evt.matches;\n self.media = evt.media;\n }\n\n function dispose(){\n if(mql){\n mql.removeListener(update);\n }\n }\n}\n\nfunction matchMedia(query, values, forceStatic){\n return new Mql(query, values, forceStatic);\n}\n\nmodule.exports = matchMedia;\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/matchmediaquery/index.js\n// module id = 5\n// module chunks = 0","/*\nCopyright (c) 2014, Yahoo! Inc. All rights reserved.\nCopyrights licensed under the New BSD License.\nSee the accompanying LICENSE file for terms.\n*/\n\n'use strict';\n\nexports.match = matchQuery;\nexports.parse = parseQuery;\n\n// -----------------------------------------------------------------------------\n\nvar RE_MEDIA_QUERY = /(?:(only|not)?\\s*([^\\s\\(\\)]+)(?:\\s*and)?\\s*)?(.+)?/i,\n RE_MQ_EXPRESSION = /\\(\\s*([^\\s\\:\\)]+)\\s*(?:\\:\\s*([^\\s\\)]+))?\\s*\\)/,\n RE_MQ_FEATURE = /^(?:(min|max)-)?(.+)/,\n RE_LENGTH_UNIT = /(em|rem|px|cm|mm|in|pt|pc)?$/,\n RE_RESOLUTION_UNIT = /(dpi|dpcm|dppx)?$/;\n\nfunction matchQuery(mediaQuery, values) {\n return parseQuery(mediaQuery).some(function (query) {\n var inverse = query.inverse;\n\n // Either the parsed or specified `type` is \"all\", or the types must be\n // equal for a match.\n var typeMatch = query.type === 'all' || values.type === query.type;\n\n // Quit early when `type` doesn't match, but take \"not\" into account.\n if ((typeMatch && inverse) || !(typeMatch || inverse)) {\n return false;\n }\n\n var expressionsMatch = query.expressions.every(function (expression) {\n var feature = expression.feature,\n modifier = expression.modifier,\n expValue = expression.value,\n value = values[feature];\n\n // Missing or falsy values don't match.\n if (!value) { return false; }\n\n switch (feature) {\n case 'orientation':\n case 'scan':\n return value.toLowerCase() === expValue.toLowerCase();\n\n case 'width':\n case 'height':\n case 'device-width':\n case 'device-height':\n expValue = toPx(expValue);\n value = toPx(value);\n break;\n\n case 'resolution':\n expValue = toDpi(expValue);\n value = toDpi(value);\n break;\n\n case 'aspect-ratio':\n case 'device-aspect-ratio':\n case /* Deprecated */ 'device-pixel-ratio':\n expValue = toDecimal(expValue);\n value = toDecimal(value);\n break;\n\n case 'grid':\n case 'color':\n case 'color-index':\n case 'monochrome':\n expValue = parseInt(expValue, 10) || 1;\n value = parseInt(value, 10) || 0;\n break;\n }\n\n switch (modifier) {\n case 'min': return value >= expValue;\n case 'max': return value <= expValue;\n default : return value === expValue;\n }\n });\n\n return (expressionsMatch && !inverse) || (!expressionsMatch && inverse);\n });\n}\n\nfunction parseQuery(mediaQuery) {\n return mediaQuery.split(',').map(function (query) {\n query = query.trim();\n\n var captures = query.match(RE_MEDIA_QUERY),\n modifier = captures[1],\n type = captures[2],\n expressions = captures[3] || '',\n parsed = {};\n\n parsed.inverse = !!modifier && modifier.toLowerCase() === 'not';\n parsed.type = type ? type.toLowerCase() : 'all';\n\n // Split expressions into a list.\n expressions = expressions.match(/\\([^\\)]+\\)/g) || [];\n\n parsed.expressions = expressions.map(function (expression) {\n var captures = expression.match(RE_MQ_EXPRESSION),\n feature = captures[1].toLowerCase().match(RE_MQ_FEATURE);\n\n return {\n modifier: feature[1],\n feature : feature[2],\n value : captures[2]\n };\n });\n\n return parsed;\n });\n}\n\n// -- Utilities ----------------------------------------------------------------\n\nfunction toDecimal(ratio) {\n var decimal = Number(ratio),\n numbers;\n\n if (!decimal) {\n numbers = ratio.match(/^(\\d+)\\s*\\/\\s*(\\d+)$/);\n decimal = numbers[1] / numbers[2];\n }\n\n return decimal;\n}\n\nfunction toDpi(resolution) {\n var value = parseFloat(resolution),\n units = String(resolution).match(RE_RESOLUTION_UNIT)[1];\n\n switch (units) {\n case 'dpcm': return value / 2.54;\n case 'dppx': return value * 96;\n default : return value;\n }\n}\n\nfunction toPx(length) {\n var value = parseFloat(length),\n units = String(length).match(RE_LENGTH_UNIT)[1];\n\n switch (units) {\n case 'em' : return value * 16;\n case 'rem': return value * 16;\n case 'cm' : return value * 96 / 2.54;\n case 'mm' : return value * 96 / 2.54 / 10;\n case 'in' : return value * 96;\n case 'pt' : return value * 72;\n case 'pc' : return value * 72 / 12;\n default : return value;\n }\n}\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/css-mediaquery/index.js\n// module id = 6\n// module chunks = 0","'use strict';\n\nfunction shallowEqualObjects(objA, objB) {\n if (objA === objB) {\n return true;\n }\n\n if (!objA || !objB) {\n return false;\n }\n\n var aKeys = Object.keys(objA);\n var bKeys = Object.keys(objB);\n var len = aKeys.length;\n\n if (bKeys.length !== len) {\n return false;\n }\n\n for (var i = 0; i < len; i++) {\n var key = aKeys[i];\n\n if (objA[key] !== objB[key]) {\n return false;\n }\n }\n\n return true;\n}\n\nmodule.exports = shallowEqualObjects;\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/shallow-equal/objects/index.js\n// module id = 7\n// module chunks = 0","import hyphenate from 'hyphenate-style-name'\nimport mq from './mediaQuery'\n\nconst negate = (cond) => `not ${cond}`\n\nconst keyVal = (k, v) => {\n const realKey = hyphenate(k)\n\n // px shorthand\n if (typeof v === 'number') {\n v = `${v}px`\n }\n if (v === true) {\n return realKey\n }\n if (v === false) {\n return negate(realKey)\n }\n return `(${realKey}: ${v})`\n}\n\nconst join = (conds) => conds.join(' and ')\n\nexport default (obj) => {\n const rules = []\n Object.keys(mq.all).forEach((k) => {\n const v = obj[k]\n if (v != null) {\n rules.push(keyVal(k, v))\n }\n })\n return join(rules)\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/toQuery.js","import PropTypes from 'prop-types'\n\nconst stringOrNumber = PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number\n])\n\n// properties that match media queries\nconst matchers = {\n orientation: PropTypes.oneOf([\n 'portrait',\n 'landscape'\n ]),\n\n scan: PropTypes.oneOf([\n 'progressive',\n 'interlace'\n ]),\n\n aspectRatio: PropTypes.string,\n deviceAspectRatio: PropTypes.string,\n\n height: stringOrNumber,\n deviceHeight: stringOrNumber,\n\n width: stringOrNumber,\n deviceWidth: stringOrNumber,\n\n color: PropTypes.bool,\n\n colorIndex: PropTypes.bool,\n\n monochrome: PropTypes.bool,\n resolution: stringOrNumber\n}\n\n// media features\nconst features = {\n minAspectRatio: PropTypes.string,\n maxAspectRatio: PropTypes.string,\n minDeviceAspectRatio: PropTypes.string,\n maxDeviceAspectRatio: PropTypes.string,\n\n minHeight: stringOrNumber,\n maxHeight: stringOrNumber,\n minDeviceHeight: stringOrNumber,\n maxDeviceHeight: stringOrNumber,\n\n minWidth: stringOrNumber,\n maxWidth: stringOrNumber,\n minDeviceWidth: stringOrNumber,\n maxDeviceWidth: stringOrNumber,\n\n minColor: PropTypes.number,\n maxColor: PropTypes.number,\n\n minColorIndex: PropTypes.number,\n maxColorIndex: PropTypes.number,\n\n minMonochrome: PropTypes.number,\n maxMonochrome: PropTypes.number,\n\n minResolution: stringOrNumber,\n maxResolution: stringOrNumber,\n\n ...matchers\n}\n\n// media types\nconst types = {\n all: PropTypes.bool,\n grid: PropTypes.bool,\n aural: PropTypes.bool,\n braille: PropTypes.bool,\n handheld: PropTypes.bool,\n print: PropTypes.bool,\n projection: PropTypes.bool,\n screen: PropTypes.bool,\n tty: PropTypes.bool,\n tv: PropTypes.bool,\n embossed: PropTypes.bool\n}\n\nconst all = { ...types, ...features }\n\n// add the type property\nmatchers.type = Object.keys(types)\n\nexport default {\n all: all,\n types: types,\n matchers: matchers,\n features: features\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/mediaQuery.js","/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nif (process.env.NODE_ENV !== 'production') {\n var ReactIs = require('react-is');\n\n // By explicitly using `prop-types` you are opting into new development behavior.\n // http://fb.me/prop-types-in-prod\n var throwOnDirectAccess = true;\n module.exports = require('./factoryWithTypeCheckers')(ReactIs.isElement, throwOnDirectAccess);\n} else {\n // By explicitly using `prop-types` you are opting into new production behavior.\n // http://fb.me/prop-types-in-prod\n module.exports = require('./factoryWithThrowingShims')();\n}\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/prop-types/index.js\n// module id = 10\n// module chunks = 0","/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nvar ReactPropTypesSecret = require('./lib/ReactPropTypesSecret');\n\nfunction emptyFunction() {}\nfunction emptyFunctionWithReset() {}\nemptyFunctionWithReset.resetWarningCache = emptyFunction;\n\nmodule.exports = function() {\n function shim(props, propName, componentName, location, propFullName, secret) {\n if (secret === ReactPropTypesSecret) {\n // It is still safe when called from React.\n return;\n }\n var err = new Error(\n 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +\n 'Use PropTypes.checkPropTypes() to call them. ' +\n 'Read more at http://fb.me/use-check-prop-types'\n );\n err.name = 'Invariant Violation';\n throw err;\n };\n shim.isRequired = shim;\n function getShim() {\n return shim;\n };\n // Important!\n // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.\n var ReactPropTypes = {\n array: shim,\n bool: shim,\n func: shim,\n number: shim,\n object: shim,\n string: shim,\n symbol: shim,\n\n any: shim,\n arrayOf: getShim,\n element: shim,\n elementType: shim,\n instanceOf: getShim,\n node: shim,\n objectOf: getShim,\n oneOf: getShim,\n oneOfType: getShim,\n shape: getShim,\n exact: getShim,\n\n checkPropTypes: emptyFunctionWithReset,\n resetWarningCache: emptyFunction\n };\n\n ReactPropTypes.PropTypes = ReactPropTypes;\n\n return ReactPropTypes;\n};\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/prop-types/factoryWithThrowingShims.js\n// module id = 11\n// module chunks = 0","/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nvar ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';\n\nmodule.exports = ReactPropTypesSecret;\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/prop-types/lib/ReactPropTypesSecret.js\n// module id = 12\n// module chunks = 0","import useMediaQuery from './useMediaQuery'\n\nexport default function MediaQuery({ children, device, onChange, ...settings }) {\n const matches = useMediaQuery(settings, device, onChange)\n\n if (typeof children === 'function') {\n return children(matches)\n }\n return matches ? children : null\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/Component.js"],"sourceRoot":""} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-responsive", 3 | "description": "Media queries in react for responsive design", 4 | "version": "8.0.0-beta.1", 5 | "homepage": "http://github.com/contra/react-responsive", 6 | "repository": { 7 | "type": "git", 8 | "url": "git://github.com/contra/react-responsive.git" 9 | }, 10 | "author": "Contra (http://contra.io)", 11 | "license": "MIT", 12 | "main": "./dist/react-responsive.js", 13 | "files": [ 14 | "dist" 15 | ], 16 | "keywords": [ 17 | "css", 18 | "react-component", 19 | "viewport", 20 | "react", 21 | "mobile", 22 | "media queries", 23 | "respond", 24 | "media query", 25 | "matchMedia", 26 | "responsive", 27 | "component" 28 | ], 29 | "dependencies": { 30 | "hyphenate-style-name": "^1.0.0", 31 | "matchmediaquery": "^0.3.0", 32 | "prop-types": "^15.6.1", 33 | "shallow-equal": "^1.1.0" 34 | }, 35 | "peerDependencies": { 36 | "react": "^16.8.0" 37 | }, 38 | "devDependencies": { 39 | "@babel/cli": "^7.0.0", 40 | "@babel/core": "^7.0.0", 41 | "@babel/plugin-proposal-class-properties": "^7.0.0", 42 | "@babel/plugin-proposal-object-rest-spread": "^7.0.0", 43 | "@babel/preset-env": "^7.0.0", 44 | "@babel/preset-react": "^7.0.0", 45 | "@babel/register": "^7.0.0", 46 | "@stae/linters": "^0.1.2", 47 | "babel-core": "^7.0.0-bridge.0", 48 | "babel-eslint": "^10.0.0", 49 | "babel-loader": "^8.0.0", 50 | "babel-plugin-add-module-exports": "^1.0.0", 51 | "chai": "^4.1.2", 52 | "cross-env": "^5.1.3", 53 | "eslint": "^5.0.0", 54 | "jsdom": "^15.0.0", 55 | "match-media-mock": "^0.1.1", 56 | "mocha": "^6.0.0", 57 | "react": "^16.8.0", 58 | "react-dom": "^16.8.0", 59 | "should": "^13.2.1", 60 | "sinon": "^7.0.0", 61 | "webpack": "^3.0.0", 62 | "webpack-dev-server": "^2.0.0" 63 | }, 64 | "scripts": { 65 | "preversion": "npm run clean && npm run build", 66 | "start": "webpack-dev-server --config webpack.config.samples.js --content-base samples/sandbox/src --host 0.0.0.0 --hot --inline --port 3333", 67 | "build:umd": "cross-env BUILD_MODE=umd webpack", 68 | "build:umd-min": "cross-env BUILD_MODE=umd-min webpack", 69 | "build": "npm run build:umd && npm run build:umd-min", 70 | "build:watch": "npm run build -- --watch", 71 | "clean": "rimraf dist", 72 | "lint": "eslint src test", 73 | "test": "cross-env NODE_PATH=$NODE_PATH:$PWD/src mocha -R spec --require @babel/register --require ./test/setup.js test/*_test.js" 74 | }, 75 | "babel": { 76 | "presets": [ 77 | "@babel/preset-env", 78 | "@babel/preset-react" 79 | ], 80 | "plugins": [ 81 | "add-module-exports", 82 | "@babel/plugin-proposal-class-properties", 83 | "@babel/plugin-proposal-object-rest-spread" 84 | ] 85 | }, 86 | "engines": { 87 | "node": ">= 0.10" 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /samples/sandbox/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Responsive Sample 4 | 5 | 6 | 7 | 8 |
9 | If you see this then something is wrong. 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /samples/sandbox/dist/index.jsx: -------------------------------------------------------------------------------- 1 | /* global document, window */ 2 | 3 | 'use strict'; 4 | 5 | var MediaQuery = require('../../../src'); 6 | var React = require('react'); 7 | var ReactDOM = require('react-dom'); 8 | window.React = React; // for dev 9 | 10 | var App = React.createClass({ 11 | displayName: 'demo', 12 | render: function(){ 13 | return ( 14 |
15 |
Device Test!
16 | 17 |
You are a desktop or laptop
18 | 19 |
You also have a huge screen
20 | 21 | 22 |
You are sized like a tablet or mobile phone though
23 | 24 | 25 | 26 | You are a tablet or mobile phone 27 | 28 | 29 | 30 |
You are portrait
31 | 32 | 33 |
You are landscape
34 | 35 | 36 |
You are retina
37 | 38 |
39 | ); 40 | } 41 | }); 42 | 43 | ReactDOM.render(, document.getElementById('main')); 44 | -------------------------------------------------------------------------------- /samples/sandbox/dist/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } -------------------------------------------------------------------------------- /samples/sandbox/dist/sample.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100%; 3 | width: 100%; 4 | } -------------------------------------------------------------------------------- /samples/sandbox/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Responsive Sample 4 | 5 | 6 | 7 | 8 |
9 | If you see this then something is wrong. 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /samples/sandbox/src/index.js: -------------------------------------------------------------------------------- 1 | /* global document, window */ 2 | 3 | 4 | import MediaQuery from 'index' 5 | import React from 'react' 6 | import ReactDOM from 'react-dom' 7 | window.React = React // for dev 8 | 9 | class App extends React.Component { 10 | render() { 11 | return ( 12 |
13 |
Device Test!
14 | 15 |
You are a desktop or laptop
16 | 17 |
You also have a huge screen
18 | 19 | 20 |
You are sized like a tablet or mobile phone though
21 | 22 | 23 | 24 | You are a tablet or mobile phone 25 | 26 | 27 | 28 |
You are portrait
29 | 30 | 31 |
You are landscape
32 | 33 | 34 |
You are retina
35 | 36 |
37 | ) 38 | } 39 | } 40 | 41 | ReactDOM.render(, document.getElementById('main')) 42 | -------------------------------------------------------------------------------- /samples/sandbox/src/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } -------------------------------------------------------------------------------- /samples/sandbox/src/sample.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | width: 100%; 4 | font-size: 22px; 5 | color: ghostwhite; 6 | background-color: darkseagreen; 7 | font-family: fantasy; 8 | } 9 | 10 | body { 11 | padding: 5vh 5px; 12 | } 13 | -------------------------------------------------------------------------------- /samples/static/src/index.jsx: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | var MediaQuery = require('../../../src') 4 | var React = require('react') 5 | 6 | var App = React.createClass({ 7 | displayName: 'demo', 8 | render: function(){ 9 | return ( 10 |
11 |
Device Test!
12 | 13 |
You are a desktop or laptop
14 | 15 |
You also have a huge screen
16 | 17 | 18 |
You are sized like a tablet or mobile phone though
19 | 20 | 21 | 22 |
You are a tablet or mobile phone
23 | 24 | 25 | 26 |
You are portrait
27 | 28 | 29 |
You are landscape
30 | 31 | 32 |
You are retina
33 | 34 |
35 | ) 36 | } 37 | }) 38 | 39 | console.log(React.renderToString()) 40 | -------------------------------------------------------------------------------- /src/Component.js: -------------------------------------------------------------------------------- 1 | import useMediaQuery from './useMediaQuery' 2 | 3 | export default function MediaQuery({ children, device, onChange, ...settings }) { 4 | const matches = useMediaQuery(settings, device, onChange) 5 | 6 | if (typeof children === 'function') { 7 | return children(matches) 8 | } 9 | return matches ? children : null 10 | } 11 | -------------------------------------------------------------------------------- /src/Context.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Context = React.createContext() 4 | 5 | export default Context 6 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import useMediaQuery from './useMediaQuery' 2 | import MediaQuery from './Component' 3 | import Context from './Context' 4 | 5 | export { 6 | MediaQuery as default, 7 | useMediaQuery, 8 | Context 9 | } 10 | -------------------------------------------------------------------------------- /src/mediaQuery.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types' 2 | 3 | const stringOrNumber = PropTypes.oneOfType([ 4 | PropTypes.string, 5 | PropTypes.number 6 | ]) 7 | 8 | // properties that match media queries 9 | const matchers = { 10 | orientation: PropTypes.oneOf([ 11 | 'portrait', 12 | 'landscape' 13 | ]), 14 | 15 | scan: PropTypes.oneOf([ 16 | 'progressive', 17 | 'interlace' 18 | ]), 19 | 20 | aspectRatio: PropTypes.string, 21 | deviceAspectRatio: PropTypes.string, 22 | 23 | height: stringOrNumber, 24 | deviceHeight: stringOrNumber, 25 | 26 | width: stringOrNumber, 27 | deviceWidth: stringOrNumber, 28 | 29 | color: PropTypes.bool, 30 | 31 | colorIndex: PropTypes.bool, 32 | 33 | monochrome: PropTypes.bool, 34 | resolution: stringOrNumber 35 | } 36 | 37 | // media features 38 | const features = { 39 | minAspectRatio: PropTypes.string, 40 | maxAspectRatio: PropTypes.string, 41 | minDeviceAspectRatio: PropTypes.string, 42 | maxDeviceAspectRatio: PropTypes.string, 43 | 44 | minHeight: stringOrNumber, 45 | maxHeight: stringOrNumber, 46 | minDeviceHeight: stringOrNumber, 47 | maxDeviceHeight: stringOrNumber, 48 | 49 | minWidth: stringOrNumber, 50 | maxWidth: stringOrNumber, 51 | minDeviceWidth: stringOrNumber, 52 | maxDeviceWidth: stringOrNumber, 53 | 54 | minColor: PropTypes.number, 55 | maxColor: PropTypes.number, 56 | 57 | minColorIndex: PropTypes.number, 58 | maxColorIndex: PropTypes.number, 59 | 60 | minMonochrome: PropTypes.number, 61 | maxMonochrome: PropTypes.number, 62 | 63 | minResolution: stringOrNumber, 64 | maxResolution: stringOrNumber, 65 | 66 | ...matchers 67 | } 68 | 69 | // media types 70 | const types = { 71 | all: PropTypes.bool, 72 | grid: PropTypes.bool, 73 | aural: PropTypes.bool, 74 | braille: PropTypes.bool, 75 | handheld: PropTypes.bool, 76 | print: PropTypes.bool, 77 | projection: PropTypes.bool, 78 | screen: PropTypes.bool, 79 | tty: PropTypes.bool, 80 | tv: PropTypes.bool, 81 | embossed: PropTypes.bool 82 | } 83 | 84 | const all = { ...types, ...features } 85 | 86 | // add the type property 87 | matchers.type = Object.keys(types) 88 | 89 | export default { 90 | all: all, 91 | types: types, 92 | matchers: matchers, 93 | features: features 94 | } 95 | -------------------------------------------------------------------------------- /src/toQuery.js: -------------------------------------------------------------------------------- 1 | import hyphenate from 'hyphenate-style-name' 2 | import mq from './mediaQuery' 3 | 4 | const negate = (cond) => `not ${cond}` 5 | 6 | const keyVal = (k, v) => { 7 | const realKey = hyphenate(k) 8 | 9 | // px shorthand 10 | if (typeof v === 'number') { 11 | v = `${v}px` 12 | } 13 | if (v === true) { 14 | return realKey 15 | } 16 | if (v === false) { 17 | return negate(realKey) 18 | } 19 | return `(${realKey}: ${v})` 20 | } 21 | 22 | const join = (conds) => conds.join(' and ') 23 | 24 | export default (obj) => { 25 | const rules = [] 26 | Object.keys(mq.all).forEach((k) => { 27 | const v = obj[k] 28 | if (v != null) { 29 | rules.push(keyVal(k, v)) 30 | } 31 | }) 32 | return join(rules) 33 | } 34 | -------------------------------------------------------------------------------- /src/useMediaQuery.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import matchMedia from 'matchmediaquery' 3 | import hyphenate from 'hyphenate-style-name' 4 | import areObjectsEqual from 'shallow-equal/objects' 5 | import toQuery from './toQuery' 6 | import Context from './Context' 7 | 8 | const makeQuery = (settings) => settings.query || toQuery(settings) 9 | 10 | const hyphenateKeys = (obj) => { 11 | if (!obj) return null 12 | const keys = Object.keys(obj) 13 | if (keys.length === 0) return null 14 | return keys.reduce((result, key) => { 15 | result[hyphenate(key)] = obj[key] 16 | return result 17 | }, {}) 18 | } 19 | 20 | const useIsUpdate = () => { 21 | const ref = React.useRef(false) 22 | 23 | React.useEffect(() => { 24 | ref.current = true 25 | }, []) 26 | 27 | return ref.current 28 | } 29 | 30 | const useDevice = (deviceFromProps) => { 31 | const deviceFromContext = React.useContext(Context) 32 | const getDevice = () => 33 | hyphenateKeys(deviceFromProps) || hyphenateKeys(deviceFromContext) 34 | const [ device, setDevice ] = React.useState(getDevice) 35 | 36 | React.useEffect(() => { 37 | const newDevice = getDevice() 38 | if (!areObjectsEqual(device, newDevice)) { 39 | setDevice(newDevice) 40 | } 41 | }, [ deviceFromProps, deviceFromContext ]) 42 | 43 | return device 44 | } 45 | 46 | const useQuery = (settings) => { 47 | const getQuery = () => makeQuery(settings) 48 | const [ query, setQuery ] = React.useState(getQuery) 49 | 50 | React.useEffect(() => { 51 | const newQuery = getQuery() 52 | if (query !== newQuery) { 53 | setQuery(newQuery) 54 | } 55 | }, [ settings ]) 56 | 57 | return query 58 | } 59 | 60 | const useMatchMedia = (query, device) => { 61 | const getMatchMedia = () => matchMedia(query, device || {}, !!device) 62 | const [ mq, setMq ] = React.useState(getMatchMedia) 63 | const isUpdate = useIsUpdate() 64 | 65 | React.useEffect(() => { 66 | if (isUpdate) { 67 | // skip on mounting, it has already been set 68 | setMq(getMatchMedia()) 69 | } 70 | 71 | return () => { 72 | mq.dispose() 73 | } 74 | }, [ query, device ]) 75 | 76 | return mq 77 | } 78 | 79 | const useMatches = (mediaQuery) => { 80 | const [ matches, setMatches ] = React.useState(mediaQuery.matches) 81 | 82 | React.useEffect(() => { 83 | const updateMatches = () => { 84 | setMatches(mediaQuery.matches) 85 | } 86 | mediaQuery.addListener(updateMatches) 87 | updateMatches() 88 | 89 | return () => { 90 | mediaQuery.removeListener(updateMatches) 91 | } 92 | }, [ mediaQuery ]) 93 | 94 | return matches 95 | } 96 | 97 | const useMediaQuery = (settings, device, onChange) => { 98 | const deviceSettings = useDevice(device) 99 | const query = useQuery(settings) 100 | if (!query) throw new Error('Invalid or missing MediaQuery!') 101 | const mq = useMatchMedia(query, deviceSettings) 102 | const matches = useMatches(mq) 103 | const isUpdate = useIsUpdate() 104 | 105 | React.useEffect(() => { 106 | if (isUpdate && onChange) { 107 | onChange(matches) 108 | } 109 | }, [ matches ]) 110 | 111 | return matches 112 | } 113 | 114 | export default useMediaQuery 115 | -------------------------------------------------------------------------------- /test/Component_test.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import MediaQuery from 'Component' 3 | import { assert } from 'chai' 4 | import ReactDOM from 'react-dom' 5 | import sinon from 'sinon' 6 | import TestUtils from 'react-dom/test-utils' 7 | 8 | describe('MediaQuery', () => { 9 | beforeEach(() => { 10 | window.matchMedia.setConfig({ 11 | type: 'screen', 12 | width: 1200, 13 | height: 800 14 | }) 15 | }) 16 | 17 | it('renders when media query matches', () => { 18 | class App extends React.Component { 19 | render = () => 20 | 21 |
22 | 23 | ; 24 | } 25 | 26 | const tree = TestUtils.renderIntoDocument() 27 | assert.isNotNull(TestUtils.findRenderedDOMComponentWithClass(tree, 'childComponent')) 28 | }) 29 | 30 | it('doesnt render when media query doesnt match', () => { 31 | class App extends React.Component { 32 | render = () => 33 | 34 |
35 | 36 | ; 37 | } 38 | 39 | const tree = TestUtils.renderIntoDocument() 40 | assert.throws(() => TestUtils.findRenderedDOMComponentWithTag(tree, 'div'), /Did not find exactly one match/) 41 | }) 42 | 43 | it('works with render prop', () => { 44 | const renderFunc = sinon.spy(() => null) 45 | TestUtils.renderIntoDocument( 46 | 47 | {renderFunc} 48 | 49 | ) 50 | assert.isTrue(renderFunc.calledOnce) 51 | assert.isTrue(renderFunc.calledWith(true)) 52 | 53 | const renderFunc2 = sinon.spy(() => null) 54 | TestUtils.renderIntoDocument( 55 | 56 | {renderFunc2} 57 | 58 | ) 59 | assert.isTrue(renderFunc2.calledOnce) 60 | assert.isTrue(renderFunc2.calledWith(false)) 61 | }) 62 | 63 | it('does not throw on unmount', () => { 64 | const container = document.createElement('div') 65 | ReactDOM.render( 66 | 67 |
68 | , 69 | container 70 | ) 71 | assert.doesNotThrow(() => ReactDOM.unmountComponentAtNode(container)) 72 | }) 73 | }) 74 | -------------------------------------------------------------------------------- /test/mediaQuery_test.js: -------------------------------------------------------------------------------- 1 | import { assert } from 'chai' 2 | import mediaQuery from 'mediaQuery' 3 | 4 | describe('mediaQuery', () => { 5 | it('has types and features in [all]', () => { 6 | assert.deepEqual(Object.keys(mediaQuery.all), Object.keys(mediaQuery.types).concat(Object.keys(mediaQuery.features))) 7 | }) 8 | it('has all media types', () => { 9 | const types = [ 10 | 'all', 11 | 'grid', 12 | 'aural', 13 | 'braille', 14 | 'handheld', 15 | 'print', 16 | 'projection', 17 | 'screen', 18 | 'tty', 19 | 'tv', 20 | 'embossed' 21 | ] 22 | assert.deepEqual(Object.keys(mediaQuery.types), types) 23 | }) 24 | it('has matchers', () => { 25 | const matchers = [ 26 | 'orientation', 27 | 'scan', 28 | 'aspectRatio', 29 | 'deviceAspectRatio', 30 | 'height', 31 | 'deviceHeight', 32 | 'width', 33 | 'deviceWidth', 34 | 'color', 35 | 'colorIndex', 36 | 'monochrome', 37 | 'resolution' 38 | ] 39 | matchers.push('type') 40 | assert.deepEqual(Object.keys(mediaQuery.matchers), matchers) 41 | }) 42 | it('has features', () => { 43 | const features = [ 44 | 'minAspectRatio', 45 | 'maxAspectRatio', 46 | 'minDeviceAspectRatio', 47 | 'maxDeviceAspectRatio', 48 | 'minHeight', 49 | 'maxHeight', 50 | 'minDeviceHeight', 51 | 'maxDeviceHeight', 52 | 'minWidth', 53 | 'maxWidth', 54 | 'minDeviceWidth', 55 | 'maxDeviceWidth', 56 | 'minColor', 57 | 'maxColor', 58 | 'minColorIndex', 59 | 'maxColorIndex', 60 | 'minMonochrome', 61 | 'maxMonochrome', 62 | 'minResolution', 63 | 'maxResolution' 64 | ] 65 | const keys = features.concat(Object.keys(mediaQuery.matchers)) 66 | keys.splice(keys.indexOf('type'), 1) 67 | 68 | assert.deepEqual(Object.keys(mediaQuery.features), keys) 69 | }) 70 | }) 71 | -------------------------------------------------------------------------------- /test/setup.js: -------------------------------------------------------------------------------- 1 | import { JSDOM } from 'jsdom' 2 | import matchMediaMock from 'match-media-mock' 3 | 4 | process.env.NODE_ENV = 'test' 5 | 6 | global.window = new JSDOM('
', { 7 | url: 'http://test.page' 8 | }).window 9 | global.document = window.document 10 | global.self = global.window 11 | global.navigator = global.window.navigator 12 | 13 | global.window.matchMedia = matchMediaMock.create() 14 | 15 | global.requestAnimationFrame = function (callback) { 16 | setTimeout(callback, 0) 17 | } 18 | -------------------------------------------------------------------------------- /test/toQuery_test.js: -------------------------------------------------------------------------------- 1 | import { assert } from 'chai' 2 | import toQuery from 'toQuery' 3 | 4 | describe('toQuery', () => { 5 | it('makes number rules', () => { 6 | const q = toQuery({ minWidth: 760 }) 7 | assert.equal(q, '(min-width: 760px)') 8 | }) 9 | it('makes true rules', () => { 10 | const q = toQuery({ colorIndex: true }) 11 | assert.equal(q, 'color-index') 12 | }) 13 | it('makes negative rules', () => { 14 | const q = toQuery({ colorIndex: false }) 15 | assert.equal(q, 'not color-index') 16 | }) 17 | it('makes regular rules', () => { 18 | const q = toQuery({ orientation: 'portrait' }) 19 | assert.equal(q, '(orientation: portrait)') 20 | }) 21 | it('handles multiple rules', () => { 22 | const q = toQuery({ orientation: 'portrait', minWidth: 760 }) 23 | assert.equal(q, '(min-width: 760px) and (orientation: portrait)') 24 | }) 25 | }) 26 | -------------------------------------------------------------------------------- /test/useMediaQuery_test.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import useMediaQuery from 'useMediaQuery' 4 | import Context from 'Context' 5 | import { assert } from 'chai' 6 | import sinon from 'sinon' 7 | import TestUtils from 'react-dom/test-utils' 8 | 9 | const sleep = (timeOut) => new Promise((resolve) => setTimeout(resolve, timeOut)) 10 | 11 | describe('useMediaQuery', () => { 12 | beforeEach(() => { 13 | window.matchMedia.setConfig({ 14 | type: 'screen', 15 | width: 1200, 16 | height: 800 17 | }) 18 | }) 19 | 20 | it('builds query from props', () => { 21 | function Component(props) { 22 | const matches = useMediaQuery(props) 23 | return matches ?
: null 24 | } 25 | class App extends React.Component { 26 | render() { 27 | return 28 | } 29 | } 30 | 31 | const tree = TestUtils.renderIntoDocument() 32 | assert.isNotNull(TestUtils.findRenderedDOMComponentWithClass(tree, 'childComponent')) 33 | 34 | const tree2 = TestUtils.renderIntoDocument() 35 | assert.throws(() => TestUtils.findRenderedDOMComponentWithTag(tree2, 'div'), /Did not find exactly one match/) 36 | }) 37 | 38 | it('builds query from device prop', () => { 39 | function Component(props) { 40 | const matches = useMediaQuery(props, { orientation: 'landscape' }) 41 | return matches ?
: null 42 | } 43 | class App extends React.Component { 44 | render() { 45 | return 46 | } 47 | } 48 | 49 | const tree = TestUtils.renderIntoDocument( 50 | 51 | ) 52 | assert.isNotNull(TestUtils.findRenderedDOMComponentWithClass(tree, 'childComponent')) 53 | 54 | const tree2 = TestUtils.renderIntoDocument( 55 | 56 | ) 57 | assert.throws(() => TestUtils.findRenderedDOMComponentWithTag(tree2, 'div'), /Did not find exactly one match/) 58 | }) 59 | 60 | it('matches taking device prop with precedence', () => { 61 | function Component({ device }) { 62 | const matches = useMediaQuery({ minWidth: 1000 }, device) 63 | return matches ?
: null 64 | } 65 | class App extends React.Component { 66 | render() { 67 | return 68 | } 69 | } 70 | 71 | const tree = TestUtils.renderIntoDocument() 72 | assert.isNotNull(TestUtils.findRenderedDOMComponentWithClass(tree, 'childComponent')) 73 | 74 | const tree2 = TestUtils.renderIntoDocument() 75 | assert.throws(() => TestUtils.findRenderedDOMComponentWithTag(tree2, 'div'), /Did not find exactly one match/) 76 | }) 77 | 78 | it('throws if theres no query', () => { 79 | function App() { 80 | useMediaQuery({}) 81 | return null 82 | } 83 | assert.throws(() => TestUtils.renderIntoDocument(), 'Invalid or missing MediaQuery!') 84 | }) 85 | 86 | it('throws if theres a bad query', () => { 87 | function App() { 88 | useMediaQuery({}) 89 | return null 90 | } 91 | assert.throws(() => TestUtils.renderIntoDocument(), 'Invalid or missing MediaQuery!') 92 | }) 93 | 94 | it('calls onChange callback on updates', () => { 95 | const container = document.createElement('div') 96 | function App({ onChange, ...settings }) { 97 | useMediaQuery(settings, null, onChange) 98 | return null 99 | } 100 | const callback = sinon.spy(() => null) 101 | 102 | TestUtils.act(() => { 103 | ReactDOM.render(, container) 104 | }) 105 | 106 | // should still match so nothing has changed 107 | TestUtils.act(() => { 108 | ReactDOM.render(, container) 109 | }) 110 | 111 | TestUtils.act(() => { 112 | ReactDOM.render(, container) 113 | }) 114 | 115 | return sleep(0).then(() => { 116 | assert.isTrue(callback.calledOnce) 117 | }) 118 | }) 119 | 120 | it('uses query prop if it has one', () => { 121 | window.matchMedia.setConfig({ 122 | orientation: 'landscape' 123 | }) 124 | 125 | function Component({ query }) { 126 | const matches = useMediaQuery({ query }) 127 | return matches ?
: null 128 | } 129 | class App extends React.Component { 130 | render() { 131 | return 132 | } 133 | } 134 | 135 | const tree = TestUtils.renderIntoDocument( 136 | 137 | ) 138 | assert.isNotNull(TestUtils.findRenderedDOMComponentWithClass(tree, 'childComponent')) 139 | 140 | const tree2 = TestUtils.renderIntoDocument( 141 | 142 | ) 143 | assert.throws(() => TestUtils.findRenderedDOMComponentWithTag(tree2, 'div'), /Did not find exactly one match/) 144 | }) 145 | 146 | it('renders using device prop from context', () => { 147 | function Component() { 148 | const matches = useMediaQuery({ maxWidth: 300 }) 149 | return matches ?
: null 150 | } 151 | class App extends React.Component { 152 | render() { 153 | return ( 154 | 155 | 156 | 157 | ) 158 | } 159 | } 160 | 161 | const tree1 = TestUtils.renderIntoDocument() 162 | assert.isNotNull(TestUtils.findRenderedDOMComponentWithClass(tree1, 'childComponent')) 163 | 164 | const tree2 = TestUtils.renderIntoDocument() 165 | assert.throws(() => TestUtils.findRenderedDOMComponentWithClass(tree2, 'childComponent'), /Did not find exactly one match/) 166 | }) 167 | 168 | it('renders taking direct device prop with precedence to device prop from context', () => { 169 | function Component() { 170 | const matches = useMediaQuery({ maxWidth: 300 }, { width: 100 }) 171 | return matches ?
: null 172 | } 173 | class App extends React.Component { 174 | render = () => 175 | 176 | 177 | 178 | ; 179 | } 180 | 181 | const tree = TestUtils.renderIntoDocument() 182 | assert.isNotNull(TestUtils.findRenderedDOMComponentWithClass(tree, 'childComponent')) 183 | }) 184 | 185 | it('should render only once when mounted', () => { 186 | let renderCount = 0 187 | function App() { 188 | useMediaQuery({ maxWidth: 300 }) 189 | renderCount += 1 190 | 191 | return null 192 | } 193 | 194 | TestUtils.act(() => { 195 | TestUtils.renderIntoDocument() 196 | }) 197 | 198 | assert.equal(renderCount, 1) 199 | }) 200 | }) 201 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | 4 | const env = new webpack.EnvironmentPlugin({ 5 | NODE_ENV: process.env.BUILD_MODE == 'umd-min' ? 'production' : 'development' 6 | }) 7 | const uglify = new webpack.optimize.UglifyJsPlugin({ 8 | sourceMap: true, 9 | parallel: true, 10 | cache: true 11 | }) 12 | const uglifyLite = new webpack.optimize.UglifyJsPlugin({ 13 | sourceMap: true, 14 | cache: true, 15 | parallel: true, 16 | compress: { 17 | dead_code: true, 18 | unused: true 19 | }, 20 | mangle: false, 21 | output: { 22 | beautify: true 23 | } 24 | }) 25 | 26 | const filename = process.env.BUILD_MODE === 'umd' 27 | ? './dist/react-responsive.js' 28 | : './dist/react-responsive.min.js' 29 | const plugins = process.env.BUILD_MODE === 'umd-min' 30 | ? [ env, uglify ] 31 | : [ env, uglifyLite ] 32 | 33 | module.exports = { 34 | entry: './src/index.js', 35 | output: { 36 | filename, 37 | sourceMapFilename: `${filename}.map`, 38 | libraryTarget: 'umd', 39 | library: 'MediaQuery' 40 | }, 41 | devtool: 'source-map', 42 | externals: { 43 | 'react': { 44 | commonjs: 'react', 45 | commonjs2: 'react', 46 | amd: 'react', 47 | root: 'React' 48 | }, 49 | 'react-dom': { 50 | commonjs: 'react-dom', 51 | commonjs2: 'react-dom', 52 | amd: 'react-dom', 53 | root: 'ReactDOM' 54 | } 55 | }, 56 | plugins, 57 | resolve: { 58 | modules: [ 59 | path.resolve('src'), 60 | 'node_modules' 61 | ] 62 | }, 63 | module: { 64 | rules: [ 65 | { 66 | test: [ /\.js$/, /\.jsx$/ ], 67 | use: 'babel-loader', 68 | exclude: /node_modules/ 69 | } 70 | ] 71 | }, 72 | node: { 73 | process: false, 74 | setImmediate: false 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /webpack.config.samples.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | const conf = require('./webpack.config') 4 | delete conf.externals 5 | conf.entry = './samples/sandbox/src/index.js' 6 | conf.output = { 7 | path: path.join(__dirname, 'serve'), 8 | filename: 'sample.js' 9 | } 10 | conf.devServer = { 11 | compress: true, 12 | hot: true, 13 | disableHostCheck: true 14 | } 15 | conf.plugins = [ ...conf.plugins, new webpack.HotModuleReplacementPlugin() ] 16 | conf.cache = true 17 | conf.devtool = 'inline-source-map' 18 | 19 | module.exports = conf 20 | --------------------------------------------------------------------------------