✨ withDisabledSSR component

source/hocs/index.js

@@ -6,3 +6,4 @@
 
 // eslint-disable-next-line
 export { default as withTimeoutFallback } from './withTimeoutFallback';
+export { default as withDisabledSSR } from './withDisabledSSR';

source/hocs/withDisabledSSR/README.md

@@ -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 />
+```
+
+

source/hocs/withDisabledSSR/__snapshots__/index.spec.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Default Spinner with timeout 1`] = `
+<DisabledSSRComponent>
+  <TestComponent>
+    <div>
+       ...spinner 
+    </div>
+  </TestComponent>
+</DisabledSSRComponent>
+`;
+
+exports[`Default Spinner with timeout 2 1`] = `
+<div>
+   ...spinner 
+</div>
+`;
+
+exports[`Default Spinner with timeout 3 1`] = `<TestComponent />`;

source/hocs/withDisabledSSR/index.js

@@ -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;

source/hocs/withDisabledSSR/index.spec.js

@@ -0,0 +1,31 @@
+import { mount, shallow } from 'enzyme/build/index';
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import withDisabledSSR from './index';
+
+const TestComponent = () => (<div> ...spinner </div>);
+const ComponentWithoutSSR = withDisabledSSR(TestComponent);
+
+
+test('Default Spinner with timeout', () => {
+    const component = mount(
+        <ComponentWithoutSSR />,
+    );
+
+    expect(component).toMatchSnapshot();
+});
+
+test('Default Spinner with timeout 2', () => {
+    const component = renderer.create(
+        <ComponentWithoutSSR />,
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+});
+
+test('Default Spinner with timeout 3', () => {
+    const component = shallow(
+        <ComponentWithoutSSR />,
+    );
+    expect(component).toMatchSnapshot();
+});