Skip to content

yjb94/react-store-badges

Repository files navigation

react-store-badges

Travis npm package Coveralls

react-store-badges is a React.js component displaying badges for App Store and Google Play Store. react-store-badge serves locale(localization) setting for each country.

react-store-badge uses SVG files, (optimized by svgo) so no worries about image going wrong.

Getting started

  npm install --save react-store-badges

Usage

  import React, {Component} from 'react'

  import ReactStoreBadges from 'react-store-badges'

  class App extends Component {
    render() {
      return <div>
        <ReactStoreBadges
          platform={'ios'}
          url={'YOUR_APP_STORE_URL'}
          locale={'en-us'}
        />

        <ReactStoreBadges
          platform={'android'}
          url={'YOUR_PLAY_STORE_URL'}
          locale={'ko-kr'}
        />
      </div>
    }
  }

props

Name Type Default Description
url string required url of App Store and Play Store
platform 'ios'|'android' required url of App Store and Play Store
defaultLocale string 'en-us' default locale code
locale string 'en-us' locale name
width number 135 width for badge size
height number 40 height for badge size
target '_self'|'_blank'|'_parent'|'_top' '_self' target for url to be opened

Localization

Supported locales

Apple locales list

Google locales list

Localization tip

  • iOS uses full code of their locale. (ex. en-us) and google uses short code of their locale(ex. en). So if you want your badge in only one store, you can customize it anyway.

Badge Guidelines

please note that you have to follow the guidelines below

Apple Badge Guidelines

Google Badge Guidelines