react-smartbanner

<!DOCTYPE html> <html lang="zh-Hant-TW"> <head> <meta charset="UTF-8"> <title>React-SmartBanner</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0"> <meta name="author" content="patw" /> <meta name="apple-itunes-app" content="app-id=284882215"> <meta name="google-play-app" content="app-id=com.facebook.katana"> <meta name="kindle-fire-app" content="app-id=B0094BB4TW"> <meta name="msApplication-ID" content="82a23635-5bd9-df11-a844-00237de2db9e"> <meta name="msApplication-PackageFamilyName" content="facebook_9wzdncrfhv5g"> <link rel="apple-touch-icon" href="icon.png"> <link rel="android-touch-icon" href="icon.png"> <link rel="windows-touch-icon" href="icon.png"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/tomorrow-night-eighties.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.min.css" />  <style> .footer { text-align: center; margin: 20px auto; } </style> </head> <body> <div id="content"> <h1>If you can see this, something is broken (or JS is not enabled)!!.</h1> </div> <div class="container-fluid"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="page-header"> <h1>React-SmartBanner</h1> </div> <h2>Installation</h2> <pre><code>npm install --save react-smartbanner</code></pre> <p>or...</p> <pre><code>yarn add react-smartbanner</code></pre> <hr> <h2>Syntax</h2> <h3>General</h3> <p>Remember to add following meta tags in your HTML page: (Use Facebook app as example)</p> <pre><code class="html"><head> <meta name="apple-itunes-app" content="app-id=284882215"> <meta name="google-play-app" content="app-id=com.facebook.katana"> <meta name="msApplication-ID" content="82a23635-5bd9-df11-a844-00237de2db9e"> <meta name="msApplication-PackageFamilyName" content="facebook_9wzdncrfhv5g"> <meta name="kindle-fire-app" content="app-id=B0094BB4TW"> <link rel="apple-touch-icon" href="icon.png"> <link rel="android-touch-icon" href="icon.png"> <link rel="windows-touch-icon" href="icon.png"> </head> </code></pre> <p>And React-SmartBanner component usage:</p> <pre><code class="javascript"> import React from 'react'; import ReactDOM from 'react-dom'; import SmartBanner from 'react-smartbanner'; 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>Display on install button. (node)</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">position</th> <td><code>'top'</code> / <code>'bottom'</code></td> <td>Display position on screen. Bottom is fixed, top scrolls out.</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> { ios: 'http://www.domain.com', android: 'http://www.domain2.com', windows: 'http://www.domain3.com', kindle: 'http://www.domain4.com' } </code></td> <td> Custom URL for each device </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> <tr> <th scope="row">onClose</th> <td>No default value</td> <td> Optional callback when user clicks on close button. </td> </tr> <tr> <th scope="row">onInstall</th> <td>No default value</td> <td> Optional callback when user clicks on install button. </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 crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/prop-types/prop-types.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> </body> </html>