Wikia · vforge · Mar 20, 2019 · Mar 19, 2019 · Mar 19, 2019 · Mar 19, 2019
@@ -76,7 +76,8 @@
     "name": "Higher Order Components",
     "directory": "hocs",
     "items": [
-      "withTimeoutFallback"
+      "withTimeoutFallback",
+      "withDisabledSSR"
     ]
   },
   {

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-common</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,700"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.20e72f92.js"></script></body></html>
+<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-common</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,700"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.c00ec238.js"></script></body></html>
@@ -6,3 +6,4 @@
 
 // eslint-disable-next-line
 export { default as withTimeoutFallback } from './withTimeoutFallback';
+export { default as withDisabledSSR } from './withDisabledSSR';
@@ -0,0 +1,16 @@
+Only render a component on the browser
+
+
+## Usage
+
+```js static
+import withDisabledSSR from '@react-common/hocs/withDisabledSSR';
+
+const Component = props => (<div> ...spinner </div>)
+const ComponentWithDisabledSSR = withDisabledSSR(Component);
+
+// Usage
+<ComponentWithDisabledSSR />
+```
+
+
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component without SSR 1`] = `
+<DisabledSSRComponent>
+  <TestComponent>
+    <div>
+       ...spinner 
+    </div>
+  </TestComponent>
+</DisabledSSRComponent>
+`;
@@ -0,0 +1,25 @@
+import React from 'react';
+
+function withDisabledSSR(WrappedComponent) {
+    class DisabledSSRComponent extends React.Component {
+        state = {
+            shouldRender: false,
+        };
+
+        componentDidMount() {
+            this.setState({ shouldRender: true });
+        }
+
+        render() {
+            if (!this.state.shouldRender) {
+                return null;
+            }
+
+            return <WrappedComponent {...this.props} />;
+        }
+    }
+
+    return DisabledSSRComponent;
+}
+
+export default withDisabledSSR;
@@ -0,0 +1,16 @@
+import { mount } from 'enzyme/build/index';
+import React from 'react';
+
+import withDisabledSSR from './index';
+
+const TestComponent = () => (<div> ...spinner </div>);
+const ComponentWithoutSSR = withDisabledSSR(TestComponent);
+
+
+test('Component without SSR', () => {
+    const component = mount(
+        <ComponentWithoutSSR />,
+    );
+
+    expect(component).toMatchSnapshot();
+});