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.

Contents

• React-mobile-animated-banner
• Contents
• Support
• Preview
• How to install?
• How to use it?
• Available options
• Goals
• More Preview

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

• [x] Adding props to render only on iOS.
• [x] Adding props to render only on Android.
• [x] Adding props to render only in a specific screen width range, lower than X to Z.
• [x] Adding props to accept app logo, company logo, custom reviews, custom stars, CTA label.
• [ ] Adding props to accept custom numbers of stars.
• [x] Adding props to render on top or bottom of the screen
• [x] 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.
• [x] Adding onClosing, onCTA and onComponentDidMount callback.
• [x] Adding documentation for each prop.
• [x] Creating and populating the README.md file.
• [ ] Adding tests.

More Preview

iPhone XR with the react-mobile-animated-banner on top side

iPhone XR with the react-mobile-animated-banner on bottom side

IPad Air with the react-mobile-animated-banner on top side