From e9f6447ae64097e6a0902269cf6fd6a17de3f8d7 Mon Sep 17 00:00:00 2001
From: Julien Usson <usson.julien@gmail.com>
Date: Sat, 6 Oct 2018 16:17:26 +0200
Subject: [PATCH 1/2] :memo: render props doc for withWidth
---
.../layout/breakpoints/RenderPropsWithWidth.js | 16 ++++++++++++++++
docs/src/pages/layout/breakpoints/breakpoints.md | 7 +++++++
pages/layout/breakpoints.js | 7 +++++++
3 files changed, 30 insertions(+)
create mode 100644 docs/src/pages/layout/breakpoints/RenderPropsWithWidth.js
diff --git a/docs/src/pages/layout/breakpoints/RenderPropsWithWidth.js b/docs/src/pages/layout/breakpoints/RenderPropsWithWidth.js
new file mode 100644
index 00000000000000..02f9d8e85c6734
--- /dev/null
+++ b/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 WithWidthDemo() {
+ return (
+ <WithWidth>
+ {({ width }) => <Typography variant="subtitle1">Current width: {width}</Typography>}
+ </WithWidth>
+ );
+}
+
+export default WithWidthDemo;
diff --git a/docs/src/pages/layout/breakpoints/breakpoints.md b/docs/src/pages/layout/breakpoints/breakpoints.md
index fac29256e1e363..615ce5a66d643e 100644
--- a/docs/src/pages/layout/breakpoints/breakpoints.md
+++ b/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 prop name collisions using higher-order components.
+In those cases you can use [render props](https://reactjs.org/docs/render-props.html) like in the following demo.
+
+{{"demo": "pages/layout/breakpoints/RenderPropsWithWidth.js"}}
+
## API
### `withWidth([options]) => higher-order component`
diff --git a/pages/layout/breakpoints.js b/pages/layout/breakpoints.js
index 2587e107c7721d..d139e745ffbed5 100644
--- a/pages/layout/breakpoints.js
+++ b/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')
`,
},
}}
From 2a5ba0df0fa103834ef1355ccf96c10c1aa28e1c Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 10 Oct 2018 22:23:25 +0200
Subject: [PATCH 2/2] well done
---
docs/src/pages/layout/breakpoints/RenderPropsWithWidth.js | 4 ++--
docs/src/pages/layout/breakpoints/breakpoints.md | 6 +++---
2 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/docs/src/pages/layout/breakpoints/RenderPropsWithWidth.js b/docs/src/pages/layout/breakpoints/RenderPropsWithWidth.js
index 02f9d8e85c6734..d624c449c63773 100644
--- a/docs/src/pages/layout/breakpoints/RenderPropsWithWidth.js
+++ b/docs/src/pages/layout/breakpoints/RenderPropsWithWidth.js
@@ -5,7 +5,7 @@ import toRenderProps from 'recompose/toRenderProps';
const WithWidth = toRenderProps(withWidth());
-function WithWidthDemo() {
+function RenderPropsWithWidth() {
return (
<WithWidth>
{({ width }) => <Typography variant="subtitle1">Current width: {width}</Typography>}
@@ -13,4 +13,4 @@ function WithWidthDemo() {
);
}
-export default WithWidthDemo;
+export default RenderPropsWithWidth;
diff --git a/docs/src/pages/layout/breakpoints/breakpoints.md b/docs/src/pages/layout/breakpoints/breakpoints.md
index 615ce5a66d643e..6596ab33fc17dc 100644
--- a/docs/src/pages/layout/breakpoints/breakpoints.md
+++ b/docs/src/pages/layout/breakpoints/breakpoints.md
@@ -41,10 +41,10 @@ In the following demo, we change the rendered DOM element (*em*, <u>u</u>, ~~del
⚠️ `withWidth()` server-side rendering support is limited.
-## Render Props
+### Render Props
-In some cases you could have prop name collisions using higher-order components.
-In those cases you can use [render props](https://reactjs.org/docs/render-props.html) like in the following demo.
+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"}}