Skip to content

Commit

Permalink
[useMediaQuery] Support custom window (#18741)
Browse files Browse the repository at this point in the history
  • Loading branch information
siriwatknp authored and oliviertassinari committed Dec 9, 2019
1 parent bd49992 commit dd9e0d6
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 5 deletions.
3 changes: 2 additions & 1 deletion docs/src/pages/components/use-media-query/use-media-query.md
Original file line number Diff line number Diff line change
Expand Up @@ -164,12 +164,13 @@ You can reproduce the same behavior with a `useWidth` hook:
- `options.defaultMatches` (*Boolean* [optional]):
As `window.matchMedia()` is unavailable on the server,
we return a default matches during the first mount. The default value is `false`.
- `options.matchMedia` (*Function* [optional]) You can provide your own implementation of *matchMedia*. This can be used for handling an iframe content window.
- `options.noSsr` (*Boolean* [optional]): Defaults to `false`.
In order to perform the server-side rendering reconciliation, it needs to render twice.
A first time with nothing and a second time with the children.
This double pass rendering cycle comes with a drawback. It's slower.
You can set this flag to `true` if you are **not doing server-side rendering**.
- `options.ssrMatchMedia` (*Function* [optional]) You can provide your own implementation of *matchMedia*. This especially useful for [server-side rendering support](#server-side-rendering).
- `options.ssrMatchMedia` (*Function* [optional]) You can provide your own implementation of *matchMedia* in a [server-side rendering context](#server-side-rendering).

Note: You can change the default options using the [`default props`](/customization/globals/#default-props) feature of the theme with the `MuiUseMediaQuery` key.

Expand Down
13 changes: 9 additions & 4 deletions packages/material-ui/src/useMediaQuery/useMediaQuery.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,19 @@ function useMediaQuery(queryInput, options = {}) {
const supportMatchMedia =
typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';

const { defaultMatches = false, noSsr = false, ssrMatchMedia = null } = {
const {
defaultMatches = false,
matchMedia = supportMatchMedia ? window.matchMedia : null,
noSsr = false,
ssrMatchMedia = null,
} = {
...props,
...options,
};

const [match, setMatch] = React.useState(() => {
if (noSsr && supportMatchMedia) {
return window.matchMedia(query).matches;
return matchMedia(query).matches;
}
if (ssrMatchMedia) {
return ssrMatchMedia(query).matches;
Expand All @@ -56,7 +61,7 @@ function useMediaQuery(queryInput, options = {}) {
return undefined;
}

const queryList = window.matchMedia(query);
const queryList = matchMedia(query);
const updateMatch = () => {
// Workaround Safari wrong implementation of matchMedia
// TODO can we remove it?
Expand All @@ -71,7 +76,7 @@ function useMediaQuery(queryInput, options = {}) {
active = false;
queryList.removeListener(updateMatch);
};
}, [query, supportMatchMedia]);
}, [query, matchMedia, supportMatchMedia]);

return match;
}
Expand Down

0 comments on commit dd9e0d6

Please sign in to comment.