react-app-store-buttons

React components for app store and platform download buttons (App Store, Google Play, Chrome Extension, Windows, macOS, Linux)

💍One Code to rule them all — and in the cloud compile them.

🤖 Agent skill — npx skills@latest add https://github.com/OpenSourceAGI/dev-tools-starter-agent --skill app-store-buttons (what it covers)

React badge components for app store and platform download links. Badges ship as bundled assets — no CDN required. DEMO

screen

Install

npm install react-native-app-buttons

Import the bundled stylesheet if your project doesn't use Tailwind:

import "react-native-app-buttons/styles";

Features

8 platforms — iOS App Store, Google Play, Chrome Web Store, Mac App Store, Microsoft Store, Linux, Snap Store
appId prop — pass your app identifier and the correct store URL is built automatically per platform
Native deep links — when the user is on the matching OS the button uses the native store protocol (itms-apps://, macappstore://, market://, ms-windows-store://) so the store app opens directly
autoHighlight — detects the user's OS via navigator.userAgent and applies a golden glow ring to the matching platform button
highlight — manually force the golden glow on any button
newTab — open in new tab (default) or same tab
height — badge image height in px (default 56)
Exported utilities — getOS(), OS enum, buildStoreUrl(), buildDeepLink(), platformMatchesOS()

Usage

import { DownloadAppButton } from "react-native-app-buttons";

<DownloadAppButton platform="ios"              appId="6474268307"               autoHighlight />
<DownloadAppButton platform="android"          appId="com.example.app"          autoHighlight />
<DownloadAppButton platform="chrome-extension" appId="noecbaibfh..."            autoHighlight />
<DownloadAppButton platform="macos"            appId="6474268307"               autoHighlight />
<DownloadAppButton platform="windows"          appId="9NBLGGH4NNS1"             autoHighlight />
<DownloadAppButton platform="linux-snap"       appId="my-app"                   autoHighlight />
<DownloadAppButton platform="linux"            href="https://example.com/linux" autoHighlight />

Pass href instead of appId to use an explicit URL:

<DownloadAppButton platform="ios" href="https://apps.apple.com/app/id6474268307" />

Props

Prop	Type	Default	Notes
`platform`	`Platform`	—	Required
`appId`	`string`	—	Either `appId` or `href` required
`href`	`string`	—	Either `appId` or `href` required
`autoHighlight`	`boolean`	`false`	Golden glow when OS matches platform
`highlight`	`boolean`	—	Force glow on/off; overrides `autoHighlight`
`newTab`	`boolean`	`true`	`target="_blank"`
`height`	`number`	`56`	Badge height in px
`className`	`string`	`""`	Extra classes on `<a>`
`alt`	`string`	Platform label	Accessible alt text

Deep link schemes

Platform	Native deep link	Web fallback
iOS	`itms-apps://itunes.apple.com/app/id{id}`	`https://apps.apple.com/app/id{id}`
macOS	`macappstore://itunes.apple.com/app/id{id}`	`https://apps.apple.com/app/id{id}`
Android	`market://details?id={pkg}`	`https://play.google.com/store/apps/details?id={pkg}`
Windows	`ms-windows-store://pdp/?productid={id}`	`https://apps.microsoft.com/detail/{id}?rtc=1`
Chrome	—	`https://chromewebstore.google.com/detail/{id}`
Snap	—	`https://snapcraft.io/{name}`

Utilities

import { getOS, OS, platformMatchesOS, buildStoreUrl, buildDeepLink, resolveHref } from "react-native-app-buttons";

getOS()                                             // → OS.macOS | OS.Windows | OS.Linux | …
platformMatchesOS("macos", getOS())                 // → true on macOS
buildStoreUrl("android", "com.example.app")         // → "https://play.google.com/…"
buildDeepLink("android", "com.example.app")         // → "market://details?id=…"
resolveHref("android", "com.example.app", getOS()) // → deep link on Android, web elsewhere

Dev

npm run dev        # demo at http://localhost:5173
        build      # library build → dist/
        typecheck

Please star this repo for updates! 🌟

Source: packages/react-app-store-buttons/README.md