Skip to content

Commit

Permalink
[docs] ssrMatchMedia required for client rending as well
Browse files Browse the repository at this point in the history
  • Loading branch information
moshest committed Dec 4, 2019
1 parent b14c7a4 commit c20d8a7
Showing 1 changed file with 4 additions and 2 deletions.
6 changes: 4 additions & 2 deletions docs/src/pages/components/use-media-query/use-media-query.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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()`

Expand Down

0 comments on commit c20d8a7

Please sign in to comment.