custom-react-smartbanner v0.0.16

custom-react-smartbanner

custom-react-smartbanner is a npm package designed to create smart app banners, used for advertising iOS and Android apps on a website. It allows you to keep details such as the icon, title, author and price customizable for both iOS and Android.

It uses ReactJS extensively and is very flexible for developers to use, allowing you to display banners in a certain component or your entire application.

Demo

🎨 Live Demo

What you can do

• Choose to display the banner only on some pages.
• Choose to display or hide based on custom React's state

What you can't do

• Detect whether a user has a mobile app installed or not. (This is not allowed due to user's privacy, unless you use Apple Native Smartbanner which can detect the installed app on safari).
• So if you want to dynamically based on user's app installation state, you might need other proxy. Ex. has a server side to keep track whether user has ever send requests from mobile app or not.

Installation

npm install custom-react-smartbanner

Usage

Start by importing Smartbanner and Button from the installed package and add the package css file to your app component:

import { Smartbanner, Button } from "custom-react-smartbanner";
import "custom-react-smartbanner/dist/custom-react-smartbanner.css";

Use case 1 : Show the banner always

If you want to always show the banner, include the Smartbanner component in your top level component such as app.tsx:

function App() {
  const [isOpen, setIsOpen] = useState(true);

  const handleClose = () => setIsOpen(false);

  return (
    <div>
      ...
      <Smartbanner
        isOpen={isOpen}
        onClose={handleClose}
        title="Frontend Masters"
        iconUrl="https://play-lh.googleusercontent.com/8X11A1RYP--qUN-FA3tuEdNG--8QSptibgY6xWQRUDI2YASyAXe726CaE_jEohFYGno=w240-h480-rw"
        appleUrl="https://apps.apple.com/us/app/frontend-masters/id1383780486"
        androidUrl="https://play.google.com/store/apps/details?id=in.mjg.frontendmasters.store&hl=en_GB"
      />
      ...
    </div>
  );
}

Use case 2 : Only show in some pages

If you want to show the banner only in some pages, then include the Smartbanner component only in those specific components.

function ProductPage() {
  const [isOpen, setIsOpen] = useState(true);

  const handleClose = () => setIsOpen(false);

  return (
    <div>
      ...
      <Smartbanner
        isOpen={isOpen}
        onClose={handleClose}
        title="Frontend Masters"
        iconUrl="https://play-lh.googleusercontent.com/8X11A1RYP--qUN-FA3tuEdNG--8QSptibgY6xWQRUDI2YASyAXe726CaE_jEohFYGno=w240-h480-rw"
        appleUrl="https://apps.apple.com/us/app/frontend-masters/id1383780486"
        androidUrl="https://play.google.com/store/apps/details?id=in.mjg.frontendmasters.store&hl=en_GB" //apps.apple.com/us/app/frontend-masters/id1383780486"
      />
      ...
    </div>
  );
}

Use case 3 : Do not show again after 14 days (if dismissed)

function ProductPage() {
  const cookiesData = new Cookies(document.cookie);
  const [isOpen, setIsOpen] = useState(
    cookiesData.get("hideSmartbanner") !== "true"
  );

  const handleClose = () => {
    cookiesData.set("hideSmartbanner", "true", {
      sameSite: "strict",
      maxAge: 60 * 60 * 24 * 7, // 1 week
    });

    setIsOpen(false);
  };

  return (
    <div>
      ...
      <Smartbanner
        isOpen={isOpen}
        onClose={handleClose}
        title="Frontend Masters"
        iconUrl="https://play-lh.googleusercontent.com/8X11A1RYP--qUN-FA3tuEdNG--8QSptibgY6xWQRUDI2YASyAXe726CaE_jEohFYGno=w240-h480-rw"
        appleUrl="https://apps.apple.com/us/app/frontend-masters/id1383780486"
        androidUrl="https://play.google.com/store/apps/details?id=in.mjg.frontendmasters.store&hl=en_GB"
      />
      ...
    </div>
  );
}

Use case 4 : Show in desktop too

function ProductPage() {
  const cookiesData = new Cookies(document.cookie);
  const [isOpen, setIsOpen] = useState(
    cookiesData.get("hideSmartbanner") !== "true"
  );

  const handleClose = () => {
    cookiesData.set("hideSmartbanner", "true", {
      sameSite: "strict",
      maxAge: 60 * 60 * 24 * 7, // 1 week
    });

    setIsOpen(false);
  };

  return (
    <div>
      ...
      <Smartbanner
        isOpen={isOpen}
        onClose={handleClose}
        title="Frontend Masters"
        iconUrl="https://play-lh.googleusercontent.com/8X11A1RYP--qUN-FA3tuEdNG--8QSptibgY6xWQRUDI2YASyAXe726CaE_jEohFYGno=w240-h480-rw"
        appleUrl="https://apps.apple.com/us/app/frontend-masters/id1383780486"
        androidUrl="https://play.google.com/store/apps/details?id=in.mjg.frontendmasters.store&hl=en_GB"
        displayOnDesktop={true}
          desktopDescription="Open in the App Store"
          desktopUrl= "https://apps.apple.com/us/app/frontend-masters/id1383780486"
      />
      ...
    </div>
  );
}

Props

Contribution

Contributions are always welcome. Please fork this repository and create a pull request if you have any improvements or feature additions. We appreciate your help in making this package more user-friendly!