diff --git a/README.md b/README.md index 157dea8..f34ccf2 100644 --- a/README.md +++ b/README.md @@ -11,11 +11,13 @@ react-store-badges is a React.js component displaying badges for App Store and G 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' @@ -40,29 +42,40 @@ react-store-badge uses SVG files, (optimized by svgo) so no worries about image } ``` +## 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](https://www.apple.com/itunes/marketing-on-itunes/identity-guidelines.html#itunes-store-badges#LocalizedBadges) [Google locales list](https://github.com/yjb94/google-play-badge-svg/tree/master/img) ### 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](https://developer.apple.com/app-store/marketing/guidelines/) [Google Badge Guidelines](https://play.google.com/intl/en_us/badges/) - - [build-badge]: https://img.shields.io/travis/yjb94/react-store-badge/master.png?style=flat-square [build]: https://travis-ci.org/yjb94/react-store-badge - [npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square [npm]: https://www.npmjs.org/package/npm-package - [coveralls-badge]: https://img.shields.io/coveralls/yjb94/react-store-badges/master.png?style=flat-square [coveralls]: https://coveralls.io/github/yjb94/react-store-badges diff --git a/demo/src/index.js b/demo/src/index.js index f6c1923..091e342 100644 --- a/demo/src/index.js +++ b/demo/src/index.js @@ -105,6 +105,16 @@ class Demo extends Component { /> +
+

Open in new target

+
+ +
+
) } diff --git a/src/index.d.ts b/src/index.d.ts index ac38892..0d92735 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -19,6 +19,9 @@ export interface ReactStoreBadgesProps { /** height for badge size */ height?: number + + /** target for url to be opened */ + target?: "_self" | "_blank" | "_parent" | "_top" } declare const ReactStoreBadges: ReactStoreBadgesProps diff --git a/src/index.js b/src/index.js index 0919400..26dde9d 100644 --- a/src/index.js +++ b/src/index.js @@ -2,7 +2,7 @@ import React, { useState } from 'react'; const HEIGHT_RATIO = 3.375; -const getImage = (locale, code = locale) => { +const getImage = (locale = 'en-us', code = locale) => { return { ios:`https://linkmaker.itunes.apple.com/images/badges/${locale}/badge_appstore-lrg.svg`, android: `https://raw.github.com/yjb94/google-play-badge-svg/master/img/${code}_get.svg?sanitize=true` @@ -16,6 +16,7 @@ const ReactStoreBadges = ({ locale = (typeof navigator !== 'undefined' && navigator.language || defaultLocale), width = 135, height = width/HEIGHT_RATIO, + target = "_self" }) => { let shortCode = locale = locale.toLowerCase() const expeptionLocale = ["zh-cn", "zh-tw"]; @@ -26,7 +27,7 @@ const ReactStoreBadges = ({ const [image, setImage] = useState(getImage(locale, shortCode)) const setDefaultImage = () => { - setImage(getImage(defaultLocale)) + setImage(getImage(defaultLocale, shortCode)) } return ( @@ -37,6 +38,7 @@ const ReactStoreBadges = ({ width: width, }} href={url} + target={target} > { locale={'en-us'} width={135} height={40} + target={"_blank"} />, node, () => { }) }) @@ -54,4 +55,13 @@ describe('ReactStoreBadges', () => { />, node, () => { }) }) + + it('wrong locale, wrong image', () => { + render( + , node, () => { + }) + }) })