feat: add showFlag attribute to LanguageSelector to display the flag …

…emoji or not
yassinedoghri · May 12, 2022 · a4b2f98 · a4b2f98
1 parent 7541a17
commit a4b2f98
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -172,10 +172,11 @@ import { LanguageSelector } from "astro-i18next/components";
 
 #### LanguageSelector Props
 
-| Prop name    | Type    | Description                                                                                           |
-| ------------ | ------- | ----------------------------------------------------------------------------------------------------- |
-| baseLanguage | string  | language code that translations are based off of (will redirect to `/` instead of `/[language-code]`) |
-| className    | ?string | class attribute for the `<select>` tag to customize it                                                |
+| Prop name    | Type     | Description                                                                                           |
+| ------------ | -------- | ----------------------------------------------------------------------------------------------------- |
+| baseLanguage | string   | language code that translations are based off of (will redirect to `/` instead of `/[language-code]`) |
+| showFlag     | ?boolean | choose to display the language emoji before language name (defaults to `false`)                       |
+| className    | ?string  | class attribute for the `<select>` tag to customize it                                                |
 
 ## License
 

diff --git a/example/src/components/templates/Home.astro b/example/src/components/templates/Home.astro
@@ -41,6 +41,7 @@ import { SEO } from "astro-seo";
     <div class="inline-flex items-center gap-2">
       <h1 class="text-6xl font-bold text-cyan-900">🧪 astro-i18next</h1>
       <LanguageSelector
+        showFlag={true}
         className="mt-2 py-3 px-4 font-semibold"
         baseLanguage="en"
       />

diff --git a/src/components/LanguageSelector.astro b/src/components/LanguageSelector.astro
@@ -5,21 +5,22 @@ import countryCodeToFlagEmoji from "country-code-to-flag-emoji";
 
 export interface Props {
   baseLanguage: string;
+  showFlag?: boolean;
   className?: string;
 }
 
 const supportedLanguages = i18next.languages;
 const currentLanguage = i18next.language;
 
-const { baseLanguage, className } = Astro.props;
+const { baseLanguage, showFlag = false, className } = Astro.props;
 ---
 
 <select onchange="location = this.value;" class={className}>
   {supportedLanguages.map((supportedLanguage: string) => {
     const value = supportedLanguage === baseLanguage ? "/" : supportedLanguage
-    const label = `${countryCodeToFlagEmoji(
-      supportedLanguage
-    )} ${ISO6391.getNativeName(supportedLanguage)}`
+    const label = `${
+      showFlag ? countryCodeToFlagEmoji(supportedLanguage) + " " : ""
+    }${ISO6391.getNativeName(supportedLanguage)}`
 
     return (
       <option value={value} selected={supportedLanguage === currentLanguage}>