Smart App Banner for React v18+ (TypeScript) — a customizable React component for promoting iOS and Android apps on mobile websites. Lightweight, flexible, and easy to integrate with your own styles or use the default native-like appearance.
🎯 Live Demo: madiyar.github.io/smartbanner-tsx
🙏 Based on: react-smartbanner
- 📱 Device detection using ua-parser-js to target iOS and Android only
- 🧠 Built-in cookie logic (via js-cookie) to hide banner for a period after user action
- 🧩 Customizable behavior — pass custom app links, metadata, and localization strings
- 🎨 Styling flexibility — use default styles or override with your own CSS
- 🌀 React Portal support — render banner outside normal DOM flow
- ✅ Written in TypeScript — includes full typings for a smooth developer experience
- 🧪 Works with React v18+
npm install smartbanner-tsx
# or
yarn add smartbanner-tsx
# or
pnpm add smartbanner-tsx- Add meta tags to
<head>
<!-- Example using YouTube app -->
<head>
<meta name="apple-itunes-app" content="app-id=544007664" />
<meta name="google-play-app" content="app-id=com.google.android.youtube" />
<link rel="apple-touch-icon" href="icon.webp" />
<link rel="android-touch-icon" href="icon.webp" />
</head>- Import and use the component
import { SmartBanner } from "smartbanner-tsx";
import "smartbanner-tsx/dist/style.css"; // or use your own CSS file
// ...
export default function App() {
return <SmartBanner title="YouTube" author="Google" />;
}See full list with descriptions and defaults on the Demo Page.
MIT — madiyar
react smart app banner, smartbanner react, custom smart banner react, react app store banner, ios smart banner, react component app banner, app promotion banner