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

key default description
daysHidden 15 Days to hide banner after close button is clicked.
daysReminder 90 Days 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
ignoreIosVersion false Boolean 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.
onClose No default value Optional callback when user clicks on close button.
onInstall No default value Optional callback when user clicks on install button.

Based on


Lincense

MIT License

Fork me on GitHub