react-smartbanner
Version:
Smart app banner react version.
209 lines (184 loc) • 7.41 kB
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" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.ie.min.css" />
<![endif]-->
<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>
<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';
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://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script>
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__
</script>
<script type="text/javascript" src="assets/example.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>