From 9319fc7ba3a5c667447742a600987ed8bf4fb48a Mon Sep 17 00:00:00 2001 From: Laura Cabrera Date: Thu, 1 Feb 2018 16:23:12 -0800 Subject: [PATCH] (docs): add a 'defaultMatches prop for SSR' section on README.md --- README.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/README.md b/README.md index 90090fa..0f6c6c2 100644 --- a/README.md +++ b/README.md @@ -119,6 +119,28 @@ If you're curious about how react-media differs from [react-responsive](https:// Enjoy! +### `defaultMatches` prop for server-side rendering + +This component comes with a `defaultMatches` prop and its default is set to true. + +When rendering on the server you can use the `defaultMatches` prop to set the initial state on the server to match whatever you think it will be on the client. You can detect the user's device by analyzing the user-agent string from the HTTP request in your server-side rendering code. + +``` +initialState = { + device: 'mobile' // add your own guessing logic here +}; + +
+ ( + Render me below medium breakpoint. + )}/> + + ( + Render me above medium breakpoint. + )}/> +
+``` + ## About `react-media` is developed and maintained by [React Training](https://reacttraining.com). If you're interested in learning more about what React can do for your company, please [get in touch](mailto:hello@reacttraining.com)!