source: imaps-frontend/node_modules/react-use/esm/useMedia.js

main
Last change on this file was d565449, checked in by stefan toskovski <stefantoska84@…>, 4 weeks ago

Update repo after prototype presentation

  • Property mode set to 100644
File size: 1.4 KB
RevLine 
[d565449]1import { useEffect, useState } from 'react';
2import { isBrowser } from './misc/util';
3var getInitialState = function (query, defaultState) {
4 // Prevent a React hydration mismatch when a default value is provided by not defaulting to window.matchMedia(query).matches.
5 if (defaultState !== undefined) {
6 return defaultState;
7 }
8 if (isBrowser) {
9 return window.matchMedia(query).matches;
10 }
11 // A default value has not been provided, and you are rendering on the server, warn of a possible hydration mismatch when defaulting to false.
12 if (process.env.NODE_ENV !== 'production') {
13 console.warn('`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches.');
14 }
15 return false;
16};
17var useMedia = function (query, defaultState) {
18 var _a = useState(getInitialState(query, defaultState)), state = _a[0], setState = _a[1];
19 useEffect(function () {
20 var mounted = true;
21 var mql = window.matchMedia(query);
22 var onChange = function () {
23 if (!mounted) {
24 return;
25 }
26 setState(!!mql.matches);
27 };
28 mql.addEventListener('change', onChange);
29 setState(mql.matches);
30 return function () {
31 mounted = false;
32 mql.removeEventListener('change', onChange);
33 };
34 }, [query]);
35 return state;
36};
37export default useMedia;
Note: See TracBrowser for help on using the repository browser.