Add some features

README.md

@@ -21,6 +21,8 @@ A React component that provides a customisable Progressive Web App (PWA) prompt
 - ⚡️ Efficient. Very little overhead for non-iOS devices and does as little work as needed for each page load.
 - 📱 Detects user's iOS version to provide the correct icon set.
 - 🌕 Will display a dark mode if enabled on iOS 13 and 14.
+-  Support RTL languages like Arabic, Farsi, Persian, ...
+-  Custom font
 
 ## Usage
 

package.json

@@ -27,11 +27,11 @@
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.0",
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.17.10",
+    "@babel/preset-env": "^7.17.10",
     "@babel/preset-react": "^7.9.4",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^8.2.5",
     "css-loader": "^3.4.2",
     "node-sass": "^4.13.1",
     "path": "^0.12.7",

src/components/PWAPrompt.js

@@ -16,6 +16,8 @@ const PWAPrompt = ({
   promptData,
   maxVisits,
   onClose,
+  dir,
+  font_family,
 }) => {
   const [isVisible, setVisibility] = useState(!Boolean(delay));
 
@@ -41,6 +43,8 @@ const PWAPrompt = ({
   const isiOS13AndUp = /OS (13|14)/.test(window.navigator.userAgent);
   const visibilityClass = isVisible ? styles.visible : styles.hidden;
   const iOSClass = isiOS13AndUp ? styles.modern : "legacy";
+  const marginText = dir === "ltr" ? {marginLeft : 32} : {marginRight: 32};
+  const customFontFamily = {fontFamily: font_family};
 
   const dismissPrompt = (evt) => {
     document.body.classList.remove(styles.noScroll);
@@ -83,38 +87,42 @@ const PWAPrompt = ({
         role="dialog"
         onTransitionEnd={onTransitionOut}
       >
-        <div className={`${styles.pwaPromptHeader} iOSPWA-header`}>
+        <div dir={dir} className={`${styles.pwaPromptHeader} iOSPWA-header`}>
           <p
             id="pwa-prompt-title"
             className={`${styles.pwaPromptTitle} iOSPWA-title`}
+            style={customFontFamily}
           >
             {copyTitle}
           </p>
           <button
             className={`${styles.pwaPromptCancel} iOSPWA-cancel`}
             onClick={dismissPrompt}
+            style={customFontFamily}
           >
             {copyClosePrompt}
           </button>
         </div>
-        <div className={`${styles.pwaPromptBody} iOSPWA-body`}>
+        <div dir={dir} className={`${styles.pwaPromptBody} iOSPWA-body`}>
           <div className={`${styles.pwaPromptDescription} iOSPWA-description`}>
             <p
               id="pwa-prompt-description"
               className={`${styles.pwaPromptCopy} iOSPWA-description-copy`}
+              style={customFontFamily}
             >
               {copyBody}
             </p>
           </div>
         </div>
-        <div className={`${styles.pwaPromptInstruction} iOSPWA-steps`}>
+        <div dir={dir} className={`${styles.pwaPromptInstruction} iOSPWA-steps`}>
           <div className={`${styles.pwaPromptInstructionStep} iOSPWA-step1`}>
             <ShareIcon
               className={`${styles.pwaPromptShareIcon} iOSPWA-step1-icon`}
               modern={isiOS13AndUp}
             />
             <p
               className={`${styles.pwaPromptCopy} ${styles.bold} iOSPWA-step1-copy`}
+              style={Object.assign(customFontFamily, marginText)}
             >
               {copyShareButtonLabel}
             </p>
@@ -126,6 +134,7 @@ const PWAPrompt = ({
             />
             <p
               className={`${styles.pwaPromptCopy} ${styles.bold} iOSPWA-step2-copy`}
+              style={Object.assign(customFontFamily, marginText)}
             >
               {copyAddHomeButtonLabel}
             </p>

src/components/PWAPrompt.styles.scss

@@ -125,7 +125,6 @@ $blue-color-modern-dark: rgba(9, 132, 255, 1);
 
   .pwaPromptTitle {
     color: $title-color-legacy;
-    font-family: $font-family;
     font-size: 18px;
     font-weight: 500;
     line-height: 1.125;
@@ -192,7 +191,6 @@ $blue-color-modern-dark: rgba(9, 132, 255, 1);
 
 .pwaPromptCopy {
   color: $font-color-legacy;
-  font-family: $font-family;
   font-size: 13px;
   line-height: 17px;
   margin: 0;
@@ -236,7 +234,6 @@ $blue-color-modern-dark: rgba(9, 132, 255, 1);
   .pwaPromptHomeIcon {
     flex: 0 0 auto;
     height: 30px;
-    margin-right: 32px;
     width: 25px;
   }
 

src/index.js

@@ -14,7 +14,7 @@ const deviceCheck = () => {
   return (isiOS || isiPadOS) && !isStandalone;
 };
 
-export default ({
+export default React.memo(({
   timesToShow = 1,
   promptOnVisit = 1,
   permanentlyHideOnDismiss = true,
@@ -26,17 +26,20 @@ export default ({
   delay = 1000,
   debug = false,
   onClose = () => {},
+  willNotShowPrompt = () => {},
+  dir = "ltr",
+  font_family = "-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto,'Helvetica Neue', Arial, sans-serif",
 }) => {
   let promptData = JSON.parse(localStorage.getItem("iosPwaPrompt"));
-
   if (promptData === null) {
     promptData = { isiOS: deviceCheck(), visits: 0 };
     localStorage.setItem("iosPwaPrompt", JSON.stringify(promptData));
   }
 
+  const aboveMinVisits = promptData.visits + 1 >= promptOnVisit;
+  const belowMaxVisits = promptData.visits + 1 < promptOnVisit + timesToShow;
+
   if (promptData.isiOS || debug) {
-    const aboveMinVisits = promptData.visits + 1 >= promptOnVisit;
-    const belowMaxVisits = promptData.visits + 1 < promptOnVisit + timesToShow;
 
     if (belowMaxVisits || debug) {
       localStorage.setItem(
@@ -60,11 +63,20 @@ export default ({
             promptData={promptData}
             maxVisits={timesToShow + promptOnVisit}
             onClose={onClose}
+            dir={dir}
+            font_family={font_family}
           />
         );
       }
     }
   }
 
+  /**
+   * Check prompt will show 
+   */
+  if (!promptData.isiOS || !aboveMinVisits || !belowMaxVisits) {
+      willNotShowPrompt()
+  }
+
   return null;
-};
+});