smartbanner-tsx

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

  

🚀 Features

* 📱 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+

📦 Installation

``bash
npm install smartbanner-tsx


or

yarn add smartbanner-tsx

or

pnpm add smartbanner-tsx
`

⚙️ Usage

1. Add meta tags to

`html







`

2. Import and use the component

`tsx
import { SmartBanner } from "smartbanner-tsx";
import "smartbanner-tsx/dist/style.css"; // or use your own CSS file

// ...

export default function App() {
return ;
}

`

🧩 Props

See full list with descriptions and defaults on the Demo Page.

📜 License

MIT — madiyar

$3

react smart app banner, smartbanner react, custom smart banner react, react app store banner, ios smart banner, react component app banner, app promotion banner`