react-mobile-banner

React Js smart Mobile Browser banner for android ,ios and windows

Install

npm install --save react-mobile-banner

Usage

import React from 'react'
import MobileBanner from 'react-mobile-banner';

export default class App extends React.Component{
   constructor(props) {
     super(props)
     this.state = {
        bannerShow:true
     };
   };
  render(){
    const { bannerShow } = this.state;
    return (
      <div>
        <MobileBanner 
            showBanner={bannerShow} 
            position="top"
            topStickyBanner={true}
            appTitle='Linked In'
            appDescription='Job Search and Networking'
            appId={{android:'com.linkedin.android',ios:'id288429040'}}
            starRatingCount={4}
            backgroundColor=""
            appIcon={require('./appIcon.png')}
            onClose={()=>this.setState({bannerShow:false})}
            onInstall={()=>alert('install Clicked')}
        />
        <p>
        ....paragraphs
        </p>
             
      </div>
    );
}
}

Available Props

key props	type	defualts	available	example	descriptions
showBanner	bool	true	true, false	{true}	to show or hide the Banner
position	string	'top'	'top', 'bottom'	{'bottom'}	Postion of the banner
topStickyBanner	bool	true	true, false	{true}	stay top of the page
backgroundColor	string	'white'	'black', '#ccc' ...etc	{'#ccc'}	Change the Background Color of the Banner
appId	Object	{}	android,ios and Windows	{ios: '', android: '', windows: '', }	Add Appliction Id of the Stores
closeButtonStyle	Object	{}	{all type of css styles}	{color:'#fff', ...},	Add style to Close Icon
onClose	function	{}	{}	{()=>alert('Close clicked")},	Event on Close button Click
appIcon	string	''	png,svg,jpeg,jpg etc..	"url" or {require('..path.png')}	App Icon Source
appIconStyle	Object	{}	{all type of css styles}	{color:'#fff', ...},	Add style to App Icon
appTitle	string	'App Title'	all type of strings	{'Linked In'}	App title
appTitleStyles	Object	{}	{all type of css styles}	{color:'#fff', ...},	Add style to App Title
appDescription	string	'App Descriptions'	all type of strings	{'App Developer Company'}	App Descriptions
appDescriptionStyle	Object	{}	{all type of css styles}	{color:'#fff', ...},	Add style to App Descriptions
starRating	bool	true	true, false	{true}	to show or hide the Rating Stars
starRatingCount	number	5	1 - 5	{4}	Ratings of Applications out of 5 star
price	Object	{}	android,ios and Windows	{ios: '$ 10', android: 'FREE', windows: '$ 23', }	Add Price to Apps
buttonText	string	'View'	all type of strings	{'Insall Now'}	App Download Button title
buttonStyle	Object	{}	{all type of css styles}	{color:'#fff', ...},	Add style to Download Button
onInstall	function	{}	{}	{()=>alert('Install Button clicked")},	Event on Install button Click

Donate

Example

Bottom	Top

License

MIT © Ajith A B