Gathering detailed insights and metrics for custom-react-smartbanner
Gathering detailed insights and metrics for custom-react-smartbanner
Gathering detailed insights and metrics for custom-react-smartbanner
Gathering detailed insights and metrics for custom-react-smartbanner
npm install custom-react-smartbanner
Typescript
Module System
Node Version
NPM Version
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
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.
1npm install custom-react-smartbanner
Start by importing Smartbanner
and Button
from the installed package and add the package css file to your app component:
1import { Smartbanner, Button } from "custom-react-smartbanner"; 2import "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
:
1function App() { 2 const [isOpen, setIsOpen] = useState(true); 3 4 const handleClose = () => setIsOpen(false); 5 6 return ( 7 <div> 8 ... 9 <Smartbanner 10 isOpen={isOpen} 11 onClose={handleClose} 12 title="Frontend Masters" 13 iconUrl="https://play-lh.googleusercontent.com/8X11A1RYP--qUN-FA3tuEdNG--8QSptibgY6xWQRUDI2YASyAXe726CaE_jEohFYGno=w240-h480-rw" 14 appleUrl="https://apps.apple.com/us/app/frontend-masters/id1383780486" 15 androidUrl="https://play.google.com/store/apps/details?id=in.mjg.frontendmasters.store&hl=en_GB" 16 /> 17 ... 18 </div> 19 ); 20}
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.
1function ProductPage() { 2 const [isOpen, setIsOpen] = useState(true); 3 4 const handleClose = () => setIsOpen(false); 5 6 return ( 7 <div> 8 ... 9 <Smartbanner 10 isOpen={isOpen} 11 onClose={handleClose} 12 title="Frontend Masters" 13 iconUrl="https://play-lh.googleusercontent.com/8X11A1RYP--qUN-FA3tuEdNG--8QSptibgY6xWQRUDI2YASyAXe726CaE_jEohFYGno=w240-h480-rw" 14 appleUrl="https://apps.apple.com/us/app/frontend-masters/id1383780486" 15 androidUrl="https://play.google.com/store/apps/details?id=in.mjg.frontendmasters.store&hl=en_GB" //apps.apple.com/us/app/frontend-masters/id1383780486" 16 /> 17 ... 18 </div> 19 ); 20}
Use case 3 : Do not show again after 14 days (if dismissed)
1function ProductPage() { 2 const cookiesData = new Cookies(document.cookie); 3 const [isOpen, setIsOpen] = useState( 4 cookiesData.get("hideSmartbanner") !== "true" 5 ); 6 7 const handleClose = () => { 8 cookiesData.set("hideSmartbanner", "true", { 9 sameSite: "strict", 10 maxAge: 60 * 60 * 24 * 7, // 1 week 11 }); 12 13 setIsOpen(false); 14 }; 15 16 return ( 17 <div> 18 ... 19 <Smartbanner 20 isOpen={isOpen} 21 onClose={handleClose} 22 title="Frontend Masters" 23 iconUrl="https://play-lh.googleusercontent.com/8X11A1RYP--qUN-FA3tuEdNG--8QSptibgY6xWQRUDI2YASyAXe726CaE_jEohFYGno=w240-h480-rw" 24 appleUrl="https://apps.apple.com/us/app/frontend-masters/id1383780486" 25 androidUrl="https://play.google.com/store/apps/details?id=in.mjg.frontendmasters.store&hl=en_GB" 26 /> 27 ... 28 </div> 29 ); 30}
Use case 4 : Show in desktop too
1function ProductPage() { 2 const cookiesData = new Cookies(document.cookie); 3 const [isOpen, setIsOpen] = useState( 4 cookiesData.get("hideSmartbanner") !== "true" 5 ); 6 7 const handleClose = () => { 8 cookiesData.set("hideSmartbanner", "true", { 9 sameSite: "strict", 10 maxAge: 60 * 60 * 24 * 7, // 1 week 11 }); 12 13 setIsOpen(false); 14 }; 15 16 return ( 17 <div> 18 ... 19 <Smartbanner 20 isOpen={isOpen} 21 onClose={handleClose} 22 title="Frontend Masters" 23 iconUrl="https://play-lh.googleusercontent.com/8X11A1RYP--qUN-FA3tuEdNG--8QSptibgY6xWQRUDI2YASyAXe726CaE_jEohFYGno=w240-h480-rw" 24 appleUrl="https://apps.apple.com/us/app/frontend-masters/id1383780486" 25 androidUrl="https://play.google.com/store/apps/details?id=in.mjg.frontendmasters.store&hl=en_GB" 26 displayOnDesktop={true} 27 desktopDescription="Open in the App Store" 28 desktopUrl= "https://apps.apple.com/us/app/frontend-masters/id1383780486" 29 /> 30 ... 31 </div> 32 ); 33}
Prop | Required / Optional | Default Value | Description |
---|---|---|---|
title | required | undefined | Title of the app name. Should be the name of the app with or without a slogan ex. Frontend Masters, Frontend Masters | Your Path to Senior Developer |
isOpen | required | true | Whether to display the banner or not |
iconUrl | required | undefined | Url of the icon that will be displayed (If your app is published, you can get the icon url on either the app store or the play store) |
appleUrl | required | undefined | URL where the users will be redirected when clicking the banner (if the user is using an apple device) |
androidUrl | required | undefined | URL where the users will be redirected when clicking the banner (if the user is using an android device) |
onClose | optional | undefined | A callback when a close button is clicked |
appleDescription | optional | "Open on the App Store" | Description to display on the banner if the device is apple (This will be automatically detected via user agent). Here, you can choose to display the price, review ratings, author's name, etc. |
androidDescription | optional | "Open on the Play Store" | Description to display on the banner if the device is android (This will be automatically detected via user agent) |
buttonLabel | optional | "Open" | Label for the Call to Action (CTA) button |
displayOnApple | optional | true | Indicates if the banner should be displayed on apple devices |
displayOnAndroid | optional | true | Indicates if the banner should be displayed on android devices |
displayOnDesktop | optional | false | Indicates if the banner should be displayed on desktop |
desktopDescription | optional | undefined | Description to display on the banner if the device is desktop (not mobile). This prop is required if displayOnDesktop is set to true |
desktopUrl | optional | undefined | URL where the users will be redirected when clicking the banner if the device is desktop (not mobile). This prop is required if displayOnDesktop is set to true . You can set this prop to either the app store link or the play store link. The logic to determine which one to redirect to is handled on your side. |
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!
No vulnerabilities found.
No security vulnerabilities found.