+ );
+}
+
+SimpleNoSsr.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(SimpleNoSsr);
diff --git a/docs/src/pages/utils/no-ssr/no-ssr.md b/docs/src/pages/utils/no-ssr/no-ssr.md
new file mode 100644
index 00000000000000..74b6c356234731
--- /dev/null
+++ b/docs/src/pages/utils/no-ssr/no-ssr.md
@@ -0,0 +1,16 @@
+---
+title: No SSR React component
+components: NoSsr
+---
+
+# No SSR
+
+
NoSsr purposely removes components from the subject of Server Side Rendering (SSR).
+
+This component can be useful in a variety of situations:
+- Escape hatch for broken dependencies not supporting SSR.
+- Improve the time-to-first paint on the client by only rendering above the fold.
+- Reduce the rendering time on the server.
+- Under too heavy server load, you can turn on service degradation.
+
+{{"demo": "pages/utils/no-ssr/SimpleNoSsr.js"}}
diff --git a/packages/material-ui/src/NoSSR/NoSSR.d.ts b/packages/material-ui/src/NoSSR/NoSSR.d.ts
deleted file mode 100644
index 38d95e59371b75..00000000000000
--- a/packages/material-ui/src/NoSSR/NoSSR.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as React from 'react';
-
-export interface NoSSRProps {
- children: React.ReactNode;
- fallback?: React.ReactNode;
-}
-
-declare const NoSSR: React.ComponentType;
-
-export default NoSSR;
diff --git a/packages/material-ui/src/NoSSR/index.d.ts b/packages/material-ui/src/NoSSR/index.d.ts
deleted file mode 100644
index a3bf2aeec739cf..00000000000000
--- a/packages/material-ui/src/NoSSR/index.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from './NoSSR';
-export * from './NoSSR';
diff --git a/packages/material-ui/src/NoSSR/index.js b/packages/material-ui/src/NoSSR/index.js
deleted file mode 100644
index e55ecae93705bc..00000000000000
--- a/packages/material-ui/src/NoSSR/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './NoSSR';
diff --git a/packages/material-ui/src/NoSsr/NoSsr.d.ts b/packages/material-ui/src/NoSsr/NoSsr.d.ts
new file mode 100644
index 00000000000000..3a3b297e81b277
--- /dev/null
+++ b/packages/material-ui/src/NoSsr/NoSsr.d.ts
@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+export interface NoSsrProps {
+ children: React.ReactNode;
+ fallback?: React.ReactNode;
+}
+
+declare const NoSsr: React.ComponentType;
+
+export default NoSsr;
diff --git a/packages/material-ui/src/NoSSR/NoSSR.js b/packages/material-ui/src/NoSsr/NoSsr.js
similarity index 66%
rename from packages/material-ui/src/NoSSR/NoSSR.js
rename to packages/material-ui/src/NoSsr/NoSsr.js
index aebfcf3a1e7a2a..dd33fe28e596e9 100644
--- a/packages/material-ui/src/NoSSR/NoSSR.js
+++ b/packages/material-ui/src/NoSsr/NoSsr.js
@@ -5,14 +5,15 @@ import exactProp from '../utils/exactProp';
const Fallback = () => null;
/**
- * Only render the component on the client.
- * It can be useful in a variety of situations:
- * - Reduce the rendering time on the server.
- * - Under too heavy server load, you can apply service degradation.
- * - Improve the time-to-first paint on the client by only rendering above the fold.
+ * NoSsr purposely removes components from the subject of Server Side Rendering (SSR).
+ *
+ * This component can be useful in a variety of situations:
* - Escape hatch for broken dependencies not supporting SSR.
+ * - Improve the time-to-first paint on the client by only rendering above the fold.
+ * - Reduce the rendering time on the server.
+ * - Under too heavy server load, you can turn on service degradation.
*/
-class NoSSR extends React.Component {
+class NoSsr extends React.Component {
state = {
mounted: false,
};
@@ -28,15 +29,15 @@ class NoSSR extends React.Component {
}
}
-NoSSR.propTypes = {
+NoSsr.propTypes = {
children: PropTypes.node.isRequired,
fallback: PropTypes.node,
};
-NoSSR.propTypes = exactProp(NoSSR.propTypes);
+NoSsr.propTypes = exactProp(NoSsr.propTypes);
-NoSSR.defaultProps = {
+NoSsr.defaultProps = {
fallback: ,
};
-export default NoSSR;
+export default NoSsr;
diff --git a/packages/material-ui/src/NoSSR/NoSSR.test.js b/packages/material-ui/src/NoSsr/NoSsr.test.js
similarity index 84%
rename from packages/material-ui/src/NoSSR/NoSSR.test.js
rename to packages/material-ui/src/NoSsr/NoSsr.test.js
index 9b268044aa914f..54cb8ef08d412c 100644
--- a/packages/material-ui/src/NoSSR/NoSSR.test.js
+++ b/packages/material-ui/src/NoSsr/NoSsr.test.js
@@ -3,9 +3,9 @@
import React from 'react';
import { assert } from 'chai';
import { createMount, createShallow } from '../test-utils';
-import NoSSR from './NoSSR';
+import NoSsr from './NoSsr';
-describe('', () => {
+describe('', () => {
let mount;
let shallow;
@@ -21,9 +21,9 @@ describe('', () => {
describe('server side rendering', () => {
it('should not render the children as the width is unknown', () => {
const wrapper = shallow(
-
+ Hello
- ,
+ ,
);
assert.strictEqual(wrapper.name(), 'Fallback');
});
@@ -32,9 +32,9 @@ describe('', () => {
describe('mounted', () => {
it('should render the children', () => {
const wrapper = mount(
-
+ Hello
- ,
+ ,
);
assert.strictEqual(wrapper.find('span').length, 1);
});
@@ -43,9 +43,9 @@ describe('', () => {
describe('prop: fallback', () => {
it('should render the fallback', () => {
const wrapper = shallow(
-
+ Hello
- ,
+ ,
);
assert.strictEqual(wrapper.text(), 'fallback');
});
diff --git a/packages/material-ui/src/NoSsr/index.d.ts b/packages/material-ui/src/NoSsr/index.d.ts
new file mode 100644
index 00000000000000..5b96a9382c7079
--- /dev/null
+++ b/packages/material-ui/src/NoSsr/index.d.ts
@@ -0,0 +1,2 @@
+export { default } from './NoSsr';
+export * from './NoSsr';
diff --git a/packages/material-ui/src/NoSsr/index.js b/packages/material-ui/src/NoSsr/index.js
new file mode 100644
index 00000000000000..7f31330f820782
--- /dev/null
+++ b/packages/material-ui/src/NoSsr/index.js
@@ -0,0 +1 @@
+export { default } from './NoSsr';
diff --git a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js
index b48221c0bbe114..696f97cd50657a 100644
--- a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js
+++ b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js
@@ -8,7 +8,7 @@ import Drawer, { getAnchor, isHorizontal } from '../Drawer/Drawer';
import { duration } from '../styles/transitions';
import withTheme from '../styles/withTheme';
import { getTransitionProps } from '../transitions/utils';
-import NoSSR from '../NoSSR';
+import NoSsr from '../NoSsr';
import SwipeArea from './SwipeArea';
// This value is closed to what browsers are using internally to
@@ -373,9 +373,9 @@ class SwipeableDrawer extends React.Component {
{!disableDiscovery &&
!disableSwipeToOpen &&
variant === 'temporary' && (
-
+
-
+
)}
);
diff --git a/packages/material-ui/src/index.d.ts b/packages/material-ui/src/index.d.ts
index 62ff1111ee823d..f5f70f083d043e 100644
--- a/packages/material-ui/src/index.d.ts
+++ b/packages/material-ui/src/index.d.ts
@@ -141,7 +141,7 @@ export { default as MenuList } from './MenuList';
export { default as MobileStepper } from './MobileStepper';
export { default as Modal, ModalManager } from './Modal';
export { default as NativeSelect } from './NativeSelect';
-export { default as NoSSR } from './NoSSR';
+export { default as NoSsr } from './NoSsr';
export { default as Paper } from './Paper';
export { default as Popover } from './Popover';
export { default as Popper } from './Popper';
diff --git a/packages/material-ui/src/index.js b/packages/material-ui/src/index.js
index 05ae92f3db928c..687a10a82cdd9d 100644
--- a/packages/material-ui/src/index.js
+++ b/packages/material-ui/src/index.js
@@ -74,7 +74,7 @@ export { default as MenuList } from './MenuList';
export { default as MobileStepper } from './MobileStepper';
export { default as Modal, ModalManager } from './Modal';
export { default as NativeSelect } from './NativeSelect';
-export { default as NoSSR } from './NoSSR';
+export { default as NoSsr } from './NoSsr';
export { default as Paper } from './Paper';
export { default as Popover } from './Popover';
export { default as Popper } from './Popper';
diff --git a/pages/api/no-ssr.js b/pages/api/no-ssr.js
new file mode 100644
index 00000000000000..6cadb5b0c966aa
--- /dev/null
+++ b/pages/api/no-ssr.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import withRoot from 'docs/src/modules/components/withRoot';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import markdown from './no-ssr.md';
+
+function Page() {
+ return ;
+}
+
+export default withRoot(Page);
diff --git a/pages/api/no-ssr.md b/pages/api/no-ssr.md
new file mode 100644
index 00000000000000..d7835a40dd5bd6
--- /dev/null
+++ b/pages/api/no-ssr.md
@@ -0,0 +1,32 @@
+---
+filename: /packages/material-ui/src/NoSsr/NoSsr.js
+title: NoSsr API
+---
+
+
+
+# NoSsr
+
+
The API documentation of the NoSsr React component.
+
+NoSsr purposely removes components from the subject of Server Side Rendering (SSR).
+
+This component can be useful in a variety of situations:
+- Escape hatch for broken dependencies not supporting SSR.
+- Improve the time-to-first paint on the client by only rendering above the fold.
+- Reduce the rendering time on the server.
+- Under too heavy server load, you can turn on service degradation.
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| children * | node | | |
+| fallback | node | <Fallback /> | |
+
+Any other properties supplied will be spread to the root element (native element).
+
+## Demos
+
+- [No Ssr](/utils/no-ssr)
+
diff --git a/pages/utils/no-ssr.js b/pages/utils/no-ssr.js
new file mode 100644
index 00000000000000..a61a4d467f288b
--- /dev/null
+++ b/pages/utils/no-ssr.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import withRoot from 'docs/src/modules/components/withRoot';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import markdown from 'docs/src/pages/utils/no-ssr/no-ssr.md';
+
+function Page() {
+ return (
+
+ );
+}
+
+export default withRoot(Page);