Merge pull request #1 from maapteh/feature/fallback-api

Feature/fallback api

.gitignore

@@ -9,3 +9,4 @@ yarn-error.log
 node_modules
 
 coverage
+dist

README.md

@@ -42,7 +42,7 @@ const Loading = () => (<div>Loading...</div>);
 const Page = () => (
   <>
     ....
-    <NoSSR onSSR={<Loading />}>
+    <NoSSR fallback={<Loading />}>
       <Foo />
     </NoSSR>
   </>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpth/react-no-ssr",
-  "version": "0.0.8",
+  "version": "1.0.0",
   "description": "React component to wrap non SSR components.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/index.spec.tsx

@@ -28,7 +28,7 @@ describe('NoSSR Component', () => {
         const Loading = () => <div>Loading...</div>;
 
         it('should render correctly with custom loading', () => {
-            const markup = ReactDOMServer.renderToStaticMarkup(<NoSSR onSSR={<Loading />}>
+            const markup = ReactDOMServer.renderToStaticMarkup(<NoSSR fallback={<Loading />}>
                 <MyComp />
             </NoSSR>);
             expect(markup).toBe('<div>Loading...</div>')

src/index.tsx

@@ -2,16 +2,16 @@ import * as React from 'react';
 
 interface Props {
     children: any; // React.ReactNode
-    onSSR?: any; // JSX.Element
+    fallback?: any; // JSX.Element
 }
 
-const NoSSR = ({ children, onSSR = null }: Props) => {
+const NoSSR = ({ children, fallback = null }: Props) => {
     const [render, setRender] = React.useState(false);
 
     React.useEffect(() => setRender(true), []);
 
     if (!render) {
-        return onSSR;
+        return fallback;
     }
 
     return children;