From 74097cb7bcc054d579d97d3fd2dee4b724924914 Mon Sep 17 00:00:00 2001
From: Arnaud Cortisse <cortissearnaud@gmail.com>
Date: Thu, 4 Jun 2020 13:33:57 +0200
Subject: [PATCH] fix: image is not updated when 'locale' is changed

---
 src/index.js | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/index.js b/src/index.js
index 26dde9d..e33771f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,10 +1,10 @@
-import React, { useState } from 'react';
+import React, { useState, useLayoutEffect } from 'react';
 
 const HEIGHT_RATIO = 3.375;
 
 const getImage = (locale = 'en-us', code = locale) => {
   return {
-    ios:`https://linkmaker.itunes.apple.com/images/badges/${locale}/badge_appstore-lrg.svg`,
+    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`
   }
 }
@@ -15,7 +15,7 @@ const ReactStoreBadges = ({
   platform,
   locale = (typeof navigator !== 'undefined' && navigator.language || defaultLocale),
   width = 135,
-  height = width/HEIGHT_RATIO,
+  height = width / HEIGHT_RATIO,
   target = "_self"
 }) => {
   let shortCode = locale = locale.toLowerCase()
@@ -30,6 +30,10 @@ const ReactStoreBadges = ({
     setImage(getImage(defaultLocale, shortCode))
   }
 
+  useLayoutEffect(() => {
+    setImage(getImage(locale, shortCode))
+  }, [locale])
+
   return (
     <a
       style={{
@@ -40,11 +44,11 @@ const ReactStoreBadges = ({
       href={url}
       target={target}
     >
-      <img 
+      <img
         src={image[platform]}
         style={{
-          width:'100%',
-          height:'100%'
+          width: '100%',
+          height: '100%'
         }}
         onError={setDefaultImage}
       />