React-mobile-animated-banner NPM

React-mobile-animated-banner

This react component allows you to add the mobile banner to your application. It is really helpful when you need to refer your mobile application from your website.

Support

If you need any support or want to suggest improvements to the react-mobile-animated-banner repository, please open an issue at issues section or contact me via LinkedIn.

Preview

How to install?

Using yarn:

yarn add react-mobile-animated-banner

Using NPM:

npm install react-mobile-animated-banner

How to use it?

import { GetTheAppBanner } from "react-mobile-animated-banner/components";

function YourApp() {
  return (
    ...
      <GetTheAppBanner />
    ...
    )
}

Available options

Here you will find all options available for the GetTheAppBanner component. Available options are:

hideBannerInitialValue?: boolean
defaultValue = undefined;

It will hide the banner if the value is set to true

onlyIOS?: boolean
defaultValue = false;

It will render the component only on IOS devices

onlyAndroid?: boolean
defaultValue = false;

It will render the component only on Android devices

onlyOnMobile?: boolean
defaultValue = false;

It will render the component only on Android or iOS devices

reviewText?: string
defaultValue = '200+ reviews';

It will change the text on the right side of the stars

closeIcon?: string
defaultValue = 'image closing icon';

It will change the image used to render the X icon

appLogo?: string
defaultValue = 'image youtube logo';

It will change the image used to render the app logo

companyLogo?: string
defaultValue = 'image youtube company logo';

It will change the image used to render the company logo

appRating?: string
defaultValue = 'image of some stars filled';

It will change the image used to render the reviews rating

buttonLabel?: string
defaultValue = 'Get the App';

It will change the button CTA label

startFrom?: 'top' | 'bottom'
defaultValue = 'top';

It will render the banner on the top or bottom of the screen.

maxWidth?: number
defaultValue = undefined;

It will render the banner until the user device width is lower than maxWidth

universalLink?: string
defaultValue = '';

It will redirect the user to this link

onClosingCallback?: () => void
defaultValue = undefined;

It will call after closing the banner component

onMountingCallback?: () => void
defaultValue = undefined;

It will call after mounting the banner component

onCTACallback?: () => void
defaultValue = undefined;

It will call when the user clicks on the CTA button

Goals

Adding props to render only on iOS.
Adding props to render only on Android.
Adding props to render only in a specific screen width range, lower than X to Z.
Adding props to accept app logo, company logo, custom reviews, custom stars, CTA label.
Adding props to accept custom numbers of stars.
Adding props to render on top or bottom of the screen
Adding props to render only for mobile devices.
Adding props to accept custom styles on all different components.
Adding animation to fade in and out, slide in up/right/left/down.
Retrieving app information from the app stores instead of being only hardcoded.
Adding onClosing, onCTA and onComponentDidMount callback.
Adding documentation for each prop.
Creating and populating the README.md file.
Adding tests.