feat: added target for href

yjb94 · May 23, 2020 · 307b782 · 307b782
1 parent 92bf511
commit 307b782
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 6 deletions.
diff --git 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**      |        <code>string</code>        | `required` | url of App Store and Play Store |
+| **platform** | <code>'ios'&#124;'android'</code> | `required` | url of App Store and Play Store |
+| **defaultLocale** | <code>string</code> | 'en-us' | default locale code |
+| **locale** | <code>string</code> | 'en-us' | locale name |
+| **width** | <code>number</code> | 135 | width for badge size |
+| **height** | <code>number</code> | 40 | height for badge size |
+| **target** | <code>'_self'&#124;'_blank'&#124;'_parent'&#124;'_top'</code> | '_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
@@ -105,6 +105,16 @@ class Demo extends Component {
             />
           </div>
         </div>
+        <div>
+          <h1>Open in new target</h1>
+          <div>
+            <ReactStoreBadges
+              platform={'ios'}
+              url={'https://apps.apple.com/app/'}
+              target="_blank"
+            />
+          </div>
+        </div>
       </div>
     )
   }

diff --git 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
@@ -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}
     >
       <img 
         src={image[platform]}

diff --git a/tests/index-test.js b/tests/index-test.js
@@ -33,6 +33,7 @@ describe('ReactStoreBadges', () => {
         locale={'en-us'}
         width={135}
         height={40}
+        target={"_blank"}
       />, node, () => {
     })
   })
@@ -54,4 +55,13 @@ describe('ReactStoreBadges', () => {
       />, node, () => {
     })
   })
+
+  it('wrong locale, wrong image', () => {
+    render(
+      <ReactStoreBadges
+        defaultLocale={'abcd'}
+        locale={'abc'}
+      />, node, () => {
+    })
+  })
 })