If you can see this, something is broken (or JS is not enabled)!!.

Installation

npm install --save react-smartbanner

or...

yarn add react-smartbanner

Syntax

General

Remember to add following meta tags in your HTML page: (Use Facebook app as example)

<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>

And React-SmartBanner component usage:


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'));

Props

keydefaultdescription
daysHidden15Days to hide banner after close button is clicked.
daysReminder90Days to hide banner after "VIEW" button is clicked.
appStoreLanguage(user's browser language)Language code for the App Store.
title''App title.
author''App author.
button'View'Display on install button. (node)
storeText{ ios: 'On the App Store', android: 'In Google Play', windows: 'In Windows store', kindle: 'In Amazon Appstore' }Store text (object).
price{ ios: 'FREE', android: 'FREE', windows: 'FREE', kindle: 'FREE' }Price text (object).
position'top' / 'bottom'Display position on screen. Bottom is fixed, top scrolls out.
force''Force to display in specific device.
(android, ios, windows, kindle)
url{ ios: 'http://www.domain.com', android: 'http://www.domain2.com', windows: 'http://www.domain3.com', kindle: 'http://www.domain4.com' }Custom URL for each device
ignoreIosVersionfalseBoolean to ignore the iOS version, so that the banner is also displayed on devices that support the native banner.
appMeta{ ios: 'apple-itunes-app', android: 'google-play-app', windows: 'msApplication-ID', kindle: 'kindle-fire-app' }The custom meta tag name (object).
It provide an option to enforce using custom meta tag to show js react-smartbanner for newer iOS versions.
onCloseNo default valueOptional callback when user clicks on close button.
onInstallNo default valueOptional callback when user clicks on install button.

Based on


Lincense

MIT License

Fork me on GitHub