remove the solution from the markdown

mui · Jul 18, 2019 · 8dbe612 · 8dbe612
1 parent 8207dba
commit 8dbe612
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 31 deletions.
diff --git a/docs/src/pages/components/use-media-query/UseWidth.js b/docs/src/pages/components/use-media-query/UseWidth.js
@@ -3,19 +3,21 @@ import { ThemeProvider, useTheme } from '@material-ui/styles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import { createMuiTheme } from '@material-ui/core/styles';
 
+/**
+ * Be careful using this hook. It only works because the number of
+ * breakpoints in theme is static. It will break once you change the number of
+ * breakpoints. See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
+ */
 function useWidth() {
   const theme = useTheme();
-  const isXs = useMediaQuery(theme.breakpoints.up('xs'));
-  const isSm = useMediaQuery(theme.breakpoints.up('sm'));
-  const isMd = useMediaQuery(theme.breakpoints.up('md'));
-  const isLg = useMediaQuery(theme.breakpoints.up('lg'));
-  const isXl = useMediaQuery(theme.breakpoints.up('xl'));
-  if (isXl) return 'xl';
-  if (isLg) return 'lg';
-  if (isMd) return 'md';
-  if (isSm) return 'sm';
-  if (isXs) return 'xs';
-  return null;
+  const keys = [...theme.breakpoints.keys].reverse();
+  return (
+    keys.reduce((output, key) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const matches = useMediaQuery(theme.breakpoints.up(key));
+      return !output && matches ? key : output;
+    }, null) || 'xs'
+  );
 }
 
 function MyComponent() {

diff --git a/docs/src/pages/components/use-media-query/use-media-query.md b/docs/src/pages/components/use-media-query/use-media-query.md
@@ -105,26 +105,6 @@ describe('MyTests', () => {
 The `withWidth()` higher-order component injects the screen width of the page.
 You can reproduce the same behavior with a `useWidth` hook:
 
-```jsx
-
-  /** null can be return from useWidth **/
-
-  const useWidth = () => {
-    const theme = useTheme();
-    const isXs = useMediaQuery(theme.breakpoints.up('xs'));
-    const isSm = useMediaQuery(theme.breakpoints.up('sm'));
-    const isMd = useMediaQuery(theme.breakpoints.up('md'));
-    const isLg = useMediaQuery(theme.breakpoints.up('lg'));
-    const isXl = useMediaQuery(theme.breakpoints.up('xl'));
-    if (isXl) return 'xl';
-    if (isLg) return 'lg';
-    if (isMd) return 'md';
-    if (isSm) return 'sm';
-    if (isXs) return 'xs';
-    return null;
-  }
-```
-
 {{"demo": "pages/components/use-media-query/UseWidth.js"}}
 
 ## API