[withWidth] Document the render prop (#13074)

* 📝 render props doc for withWidth

* well done

docs/src/pages/layout/breakpoints/RenderPropsWithWidth.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import withWidth from '@material-ui/core/withWidth';
+import Typography from '@material-ui/core/Typography';
+import toRenderProps from 'recompose/toRenderProps';
+
+const WithWidth = toRenderProps(withWidth());
+
+function RenderPropsWithWidth() {
+  return (
+    <WithWidth>
+      {({ width }) => <Typography variant="subtitle1">Current width: {width}</Typography>}
+    </WithWidth>
+  );
+}
+
+export default RenderPropsWithWidth;

docs/src/pages/layout/breakpoints/breakpoints.md

@@ -41,6 +41,13 @@ In the following demo, we change the rendered DOM element (*em*, <u>u</u>, ~~del
 
 ⚠️ `withWidth()` server-side rendering support is limited.
 
+### Render Props
+
+In some cases, you could have property name collisions using higher-order components.
+To avoid the issue, you can use the [render props](https://reactjs.org/docs/render-props.html) pattern like in the following demo.
+
+{{"demo": "pages/layout/breakpoints/RenderPropsWithWidth.js"}}
+
 ## API
 
 ### `withWidth([options]) => higher-order component`

pages/layout/breakpoints.js

@@ -21,6 +21,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/layout/breakpoints/WithWidth'), 'utf8')
+`,
+        },
+        'pages/layout/breakpoints/RenderPropsWithWidth.js': {
+          js: require('docs/src/pages/layout/breakpoints/RenderPropsWithWidth').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/layout/breakpoints/RenderPropsWithWidth'), 'utf8')
 `,
         },
       }}