Version 1.4.3

What is new?!

Customizable Icons

The LanguageSelector component now supports customizable icons for the globe (toggle button) and search input. You can pass either strings (like emojis) or React nodes (like components from react-icons or custom SVGs).

Props

1. toggleBtnIcon

   • Type: string or ReactNode
   • Default: "🌐"
   • Description: Customizes the icon displayed on the toggle button. You can use an emoji (e.g., "🌍"), a React component (e.g., <FaGlobe />), or a custom SVG.
   • Example:

     <LanguageSelector toggleBtnIcon="🌍" />
     <LanguageSelector toggleBtnIcon={<FaGlobe />} />

2. searchIcon

   • Type: string or ReactNode
   • Default: "🔍"
   • Description: Customizes the icon displayed inside the search input. You can use an emoji (e.g., "🔎"), a React component (e.g., <FaSearch />), or a custom SVG.
   • Example:

     <LanguageSelector searchIcon="🔎" />
     <LanguageSelector searchIcon={<FaSearch />} />

Usage Examples

Using Emojis

<LanguageSelector
  toggleBtnIcon="🌍"
  searchIcon="🔎"
/>

Using React Icons

import { FaGlobe, FaSearch } from "react-icons/fa";

<LanguageSelector
  toggleBtnIcon={<FaGlobe />}
  searchIcon={<FaSearch />}
/>

Using Custom SVGs

import GlobeIcon from "./icons/GlobeIcon.svg";
import SearchIcon from "./icons/SearchIcon.svg";

<LanguageSelector
  toggleBtnIcon={<img src={GlobeIcon} alt="Globe" />}
  searchIcon={<img src={SearchIcon} alt="Search" />}
/>

---

Why Use This Feature?

• Flexibility: Easily match the icons to your application's design system.
• Consistency: Use icons from popular libraries like react-icons or your custom icon set.
• Enhanced UX: Replace default icons with more visually appealing or contextually relevant ones.