Facilitate code-splitting

README.md

@@ -55,3 +55,31 @@ import PWAPrompt from 'react-ios-pwa-prompt'
 ```
 <PWAPrompt promptOnVisit={1} timesToShow={3} copyClosePrompt="Close" permanentlyHideOnDismiss={false}/>
 ```
+
+## Code-splitting
+
+You may want to use [code-splitting](https://reactjs.org/docs/code-splitting.html) to avoid unnecessarily loading the component (including styles and icons) when it isn't going to be shown.
+Use the exported `shouldShowPrompt` function to determine whether to import the component, for example:
+
+```jsx
+import shouldShowPrompt from "react-ios-pwa-prompt/src/shouldShowPrompt";
+
+const LazyPWAPrompt = React.lazy(() => import("react-ios-pwa-prompt"));
+
+function render() {
+  const options = {
+    timesToShow: 1,
+    promptOnVisit: 2,
+  };
+
+  if (shouldShowPrompt(options)) {
+    return (
+      <Suspense fallback={null}>
+        <LazyPWAPrompt {...options} />
+      </Suspense>
+    );
+  }
+
+  return null;
+}
+```

src/index.js

@@ -1,19 +1,8 @@
 import React from "react";
 
+import shouldShowPrompt from "./shouldShowPrompt";
 import PWAPrompt from "./components/PWAPrompt";
 
-const deviceCheck = () => {
-  const isiOS = /iphone|ipad|ipod/.test(
-    window.navigator.userAgent.toLowerCase()
-  );
-  const isiPadOS =
-    navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
-  const isStandalone =
-    "standalone" in window.navigator && window.navigator.standalone;
-
-  return (isiOS || isiPadOS) && !isStandalone;
-};
-
 export default ({
   timesToShow = 1,
   promptOnVisit = 1,
@@ -27,43 +16,23 @@ export default ({
   debug = false,
   onClose = () => {},
 }) => {
-  let promptData = JSON.parse(localStorage.getItem("iosPwaPrompt"));
-
-  if (promptData === null) {
-    promptData = { isiOS: deviceCheck(), visits: 0 };
-    localStorage.setItem("iosPwaPrompt", JSON.stringify(promptData));
-  }
-
-  if (promptData.isiOS || debug) {
-    const aboveMinVisits = promptData.visits + 1 >= promptOnVisit;
-    const belowMaxVisits = promptData.visits + 1 < promptOnVisit + timesToShow;
-
-    if (belowMaxVisits || debug) {
-      localStorage.setItem(
-        "iosPwaPrompt",
-        JSON.stringify({
-          ...promptData,
-          visits: promptData.visits + 1,
-        })
-      );
-
-      if (aboveMinVisits || debug) {
-        return (
-          <PWAPrompt
-            delay={delay}
-            copyTitle={copyTitle}
-            copyBody={copyBody}
-            copyAddHomeButtonLabel={copyAddHomeButtonLabel}
-            copyShareButtonLabel={copyShareButtonLabel}
-            copyClosePrompt={copyClosePrompt}
-            permanentlyHideOnDismiss={permanentlyHideOnDismiss}
-            promptData={promptData}
-            maxVisits={timesToShow + promptOnVisit}
-            onClose={onClose}
-          />
-        );
-      }
-    }
+  if (shouldShowPrompt({ timesToShow, promptOnVisit, debug })) {
+    const promptData = JSON.parse(localStorage.getItem("iosPwaPrompt"));
+
+    return (
+      <PWAPrompt
+        delay={delay}
+        copyTitle={copyTitle}
+        copyBody={copyBody}
+        copyAddHomeButtonLabel={copyAddHomeButtonLabel}
+        copyShareButtonLabel={copyShareButtonLabel}
+        copyClosePrompt={copyClosePrompt}
+        permanentlyHideOnDismiss={permanentlyHideOnDismiss}
+        promptData={promptData}
+        maxVisits={timesToShow + promptOnVisit}
+        onClose={onClose}
+      />
+    )
   }
 
   return null;

src/shouldShowPrompt.js

@@ -0,0 +1,45 @@
+function deviceCheck() {
+  const isiOS = /iphone|ipad|ipod/.test(
+    window.navigator.userAgent.toLowerCase()
+  );
+  const isiPadOS =
+    navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
+  const isStandalone =
+    "standalone" in window.navigator && window.navigator.standalone;
+
+  return (isiOS || isiPadOS) && !isStandalone;
+}
+
+export default function shouldShowPrompt({
+  timesToShow = 1,
+  promptOnVisit = 1,
+  debug = false,
+}) {
+  let promptData = JSON.parse(localStorage.getItem("iosPwaPrompt"));
+
+  if (promptData === null) {
+    promptData = { isiOS: deviceCheck(), visits: 0 };
+    localStorage.setItem("iosPwaPrompt", JSON.stringify(promptData));
+  }
+
+  if (promptData.isiOS || debug) {
+    const aboveMinVisits = promptData.visits + 1 >= promptOnVisit;
+    const belowMaxVisits = promptData.visits + 1 < promptOnVisit + timesToShow;
+
+    if (belowMaxVisits || debug) {
+      localStorage.setItem(
+        "iosPwaPrompt",
+        JSON.stringify({
+          ...promptData,
+          visits: promptData.visits + 1,
+        })
+      );
+
+      if (aboveMinVisits || debug) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+}