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)!