From c20d8a7aada282a01f6c72631bf9c7832e33e384 Mon Sep 17 00:00:00 2001 From: Moshe Simantov Date: Wed, 4 Dec 2019 14:45:39 +0200 Subject: [PATCH] [docs] `ssrMatchMedia` required for client rending as well --- .../src/pages/components/use-media-query/use-media-query.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) 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 index 51f68bca318be5..e1fa0ab49c7f22 100644 --- a/docs/src/pages/components/use-media-query/use-media-query.md +++ b/docs/src/pages/components/use-media-query/use-media-query.md @@ -108,7 +108,7 @@ You have the choice between using: Finally, you need to provide an implementation of [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) to the `useMediaQuery` with the previously guessed characteristics. Using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate matchMedia is recommended. -For instance: +For instance on the server-side: ```js import ReactDOMServer from 'react-dom/server'; @@ -142,7 +142,9 @@ function handleRender(req, res) { } ``` -{{"demo": "pages/components/use-media-query/ServerSide.js"}} +{{"demo": "pages/components/use-media-query/ServerSide.js", "defaultCodeOpen": false}} + +Make sure you provide the same custom match media implementation to the client-side to guarantee a hydration match. ## Migrating from `withWidth()`