Merge pull request #24 from patw0929/t23

Custom meta tag to show js smartbanner in newer iOS versions

example/index.html

@@ -18,4 +18,4 @@
 import './node_modules/react-smartbanner/dist/main.css';
 
 ReactDOM.render(<SmartBanner title={'Facebook'} />, document.getElementById('content'));
-</code></pre><hr><h2>Props</h2><div class="table-responsive"><table class="table table-bordered"><thead><tr><th scope="col">key</th><th scope="col">default</th><th scope="col">description</th></tr></thead><tbody><tr><th scope="row">daysHidden</th><td><code>15</code></td><td>Days to hide banner after close button is clicked.</td></tr><tr><th scope="row">daysReminder</th><td><code>90</code></td><td>Days to hide banner after "VIEW" button is clicked.</td></tr><tr><th scope="row">appStoreLanguage</th><td><code>(user's browser language)</code></td><td>Language code for the App Store.</td></tr><tr><th scope="row">title</th><td><code>''</code></td><td>App title.</td></tr><tr><th scope="row">author</th><td><code>''</code></td><td>App author.</td></tr><tr><th scope="row">button</th><td><code>'View'</code></td><td>Text on install button.</td></tr><tr><th scope="row">storeText</th><td><code>{ ios: 'On the App Store', android: 'In Google Play', windows: 'In Windows store', kindle: 'In Amazon Appstore' }</code></td><td>Store text (object).</td></tr><tr><th scope="row">price</th><td><code>{ ios: 'FREE', android: 'FREE', windows: 'FREE', kindle: 'FREE }</code></td><td>Price text (object).</td></tr><tr><th scope="row">force</th><td><code>''</code></td><td>Force to display in specific device.<br>(<code>android</code>, <code>ios</code>, <code>windows</code>, <code>kindle</code>)</td></tr><tr><th scope="row">url</th><td><code>''</code></td><td>Custom URL.</td></tr><tr><th scope="row">ignoreIosVersion</th><td><code>false</code></td><td>Boolean to ignore the iOS version, so that the banner is also displayed on devices that support the native banner.</td></tr></tbody></table></div><hr><h2>Based on</h2><ul><li><a href="https://github.com/kudago/smart-app-banner" target="_blank">Smart App Banner</a></li></ul><hr><h2>Lincense</h2><p>MIT License</p></div></div><div class="row footer"><div class="col-md-12"><ul class="list-inline"><li><a href="https://github.com/patw0929/react-smartbanner" target="_blank">GitHub</a></li><li><a href="http://patw.me" target="_blank">@patw</a></li></ul></div></div></div><div class="github-fork-ribbon-wrapper right-bottom"><div class="github-fork-ribbon"><a href="https://github.com/patw0929/react-smartbanner">Fork me on GitHub</a></div></div><script src="https://unpkg.com/[email protected]/dist/react.js"></script><script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script><script src="https://unpkg.com/prop-types/prop-types.min.js"></script><script>hljs.initHighlightingOnLoad()</script><script type="text/javascript" src="example.js"></script></body></html>
+</code></pre><hr><h2>Props</h2><div class="table-responsive"><table class="table table-bordered"><thead><tr><th scope="col">key</th><th scope="col">default</th><th scope="col">description</th></tr></thead><tbody><tr><th scope="row">daysHidden</th><td><code>15</code></td><td>Days to hide banner after close button is clicked.</td></tr><tr><th scope="row">daysReminder</th><td><code>90</code></td><td>Days to hide banner after "VIEW" button is clicked.</td></tr><tr><th scope="row">appStoreLanguage</th><td><code>(user's browser language)</code></td><td>Language code for the App Store.</td></tr><tr><th scope="row">title</th><td><code>''</code></td><td>App title.</td></tr><tr><th scope="row">author</th><td><code>''</code></td><td>App author.</td></tr><tr><th scope="row">button</th><td><code>'View'</code></td><td>Text on install button.</td></tr><tr><th scope="row">storeText</th><td><code>{ ios: 'On the App Store', android: 'In Google Play', windows: 'In Windows store', kindle: 'In Amazon Appstore' }</code></td><td>Store text (object).</td></tr><tr><th scope="row">price</th><td><code>{ ios: 'FREE', android: 'FREE', windows: 'FREE', kindle: 'FREE }</code></td><td>Price text (object).</td></tr><tr><th scope="row">force</th><td><code>''</code></td><td>Force to display in specific device.<br>(<code>android</code>, <code>ios</code>, <code>windows</code>, <code>kindle</code>)</td></tr><tr><th scope="row">url</th><td><code>''</code></td><td>Custom URL.</td></tr><tr><th scope="row">ignoreIosVersion</th><td><code>false</code></td><td>Boolean to ignore the iOS version, so that the banner is also displayed on devices that support the native banner.</td></tr><tr><th scope="row">appMeta</th><td><code>{ ios: 'apple-itunes-app', android: 'google-play-app', windows: 'msApplication-ID', kindle: 'kindle-fire-app' }</code></td><td>The custom meta tag name (object).<br/>It provide an option to enforce using custom meta tag to show js react-smartbanner for newer iOS versions.</td></tr></tbody></table></div><hr><h2>Based on</h2><ul><li><a href="https://github.com/kudago/smart-app-banner" target="_blank">Smart App Banner</a></li></ul><hr><h2>Lincense</h2><p>MIT License</p></div></div><div class="row footer"><div class="col-md-12"><ul class="list-inline"><li><a href="https://github.com/patw0929/react-smartbanner" target="_blank">GitHub</a></li><li><a href="http://patw.me" target="_blank">@patw</a></li></ul></div></div></div><div class="github-fork-ribbon-wrapper right-bottom"><div class="github-fork-ribbon"><a href="https://github.com/patw0929/react-smartbanner">Fork me on GitHub</a></div></div><script src="https://unpkg.com/[email protected]/dist/react.js"></script><script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script><script src="https://unpkg.com/prop-types/prop-types.min.js"></script><script>hljs.initHighlightingOnLoad()</script><script type="text/javascript" src="example.js"></script></body></html>

src/components/SmartBanner.js

@@ -19,6 +19,12 @@ class SmartBanner extends Component {
     author: PropTypes.string,
     url: PropTypes.string,
     ignoreIosVersion: PropTypes.bool,
+    appMeta: PropTypes.shape({
+      android: PropTypes.string,
+      ios: PropTypes.string,
+      windows: PropTypes.string,
+      kindle: PropTypes.string,
+    }),
   };
 
   static defaultProps = {
@@ -42,6 +48,12 @@ class SmartBanner extends Component {
     force: '',
     title: '',
     author: '',
+    appMeta: {
+      ios: 'apple-itunes-app',
+      android: 'google-play-app',
+      windows: 'msApplication-ID',
+      kindle: 'kindle-fire-app',
+    },
   };
 
   constructor(props) {
@@ -105,25 +117,25 @@ class SmartBanner extends Component {
   setSettingsByType() {
     const mixins = {
       ios: {
-        appMeta: 'apple-itunes-app',
+        appMeta: () => this.props.appMeta.ios,
         iconRels: ['apple-touch-icon-precomposed', 'apple-touch-icon'],
         getStoreLink: () =>
           `https://itunes.apple.com/${this.props.appStoreLanguage}/app/id`,
       },
       android: {
-        appMeta: 'google-play-app',
+        appMeta: () => this.props.appMeta.android,
         iconRels: ['android-touch-icon', 'apple-touch-icon-precomposed', 'apple-touch-icon'],
         getStoreLink: () =>
           'http://play.google.com/store/apps/details?id=',
       },
       windows: {
-        appMeta: 'msApplication-ID',
+        appMeta: () => this.props.appMeta.windows,
         iconRels: ['windows-touch-icon', 'apple-touch-icon-precomposed', 'apple-touch-icon'],
         getStoreLink: () =>
           'http://www.windowsphone.com/s?appid=',
       },
       kindle: {
-        appMeta: 'kindle-fire-app',
+        appMeta: () => this.props.appMeta.kindle,
         iconRels: ['windows-touch-icon', 'apple-touch-icon-precomposed', 'apple-touch-icon'],
         getStoreLink: () =>
           'amzn://apps/android?asin=',
@@ -145,7 +157,7 @@ class SmartBanner extends Component {
     }
 
     const meta = window.document.querySelector(
-      `meta[name="${this.state.settings.appMeta}"]`);
+      `meta[name="${this.state.settings.appMeta()}"]`);
 
     if (!meta) {
       return '';

src/index.html

@@ -166,6 +166,19 @@ <h2>Props</h2>
                   devices that support the native banner.
                 </td>
               </tr>
+              <tr>
+                <th scope="row">appMeta</th>
+                <td><code>{
+                  ios: 'apple-itunes-app',
+                  android: 'google-play-app',
+                  windows: 'msApplication-ID',
+                  kindle: 'kindle-fire-app'
+                }</code></td>
+                <td>
+                  The custom meta tag name (object).<br />
+                  It provide an option to enforce using custom meta tag to show js react-smartbanner for newer iOS versions.
+                </td>
+              </tr>
             </tbody>
           </table>
         </div>