Language Selector

Simple language switcher with flag icons for English and Japanese

Live Example

Language Selector

Select a language from the dropdown. Your preference will be saved and persisted across page refreshes. Watch how the components below change their language.

Current Language: English

Login Component (Localized)

This login form adapts to the selected language.

Autocomplete Component (Localized)

The loading message adapts to the selected language.

Implementation

Here's how the example above is implemented:

import { useState, useEffect } from 'react';
import { LanguageSelector, getLocale } from 'sgerp-frontend-lib';
import { SGERPLogin } from '@/components/ui/sgerp-login';
import { SGERPAutocomplete } from '@/components/ui/sgerp-autocomplete';

export function MyComponent() {
  const [language, setLanguage] = useState<"en" | "ja">("en");
  const [selectedProjectId, setSelectedProjectId] = useState<number | null>(null);

  // Load initial language on mount
  useEffect(() => {
    setLanguage(getLocale());
  }, []);

  return (
    <div>
      {/* Language Selector with built-in persistence */}
      <LanguageSelector onChange={setLanguage} />

      <p>Current Language: {language === "en" ? "English" : "日本語"}</p>

      {/* Localized Login */}
      <SGERPLogin language={language} />

      {/* Localized Autocomplete */}
      <SGERPAutocomplete
        collectionName="project"
        onSelectionChange={(value) => setSelectedProjectId(value)}
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
        renderLabel={(project) => (project as unknown as any).name}
        language={language}
      />

      {selectedProjectId && (
        <p>Selected Project ID: {selectedProjectId}</p>
      )}
    </div>
  );
}

Prerequisites

This component requires sgerp-frontend-lib to be installed in your project. See the Installation guide for setup instructions.

Dependencies

This component will automatically install:

shadcn/ui components: select

Usage

import { useState } from 'react';
import { LanguageSelector } from "@/components/ui/language-selector"

export function MyComponent() {
  const [language, setLanguage] = useState<"en" | "ja">("en");

  return (
    <div>
      <LanguageSelector
        language={language}
        onChange={setLanguage}
      />

      <p>Current language: {language}</p>
    </div>
  )
}

Props

Prop	Type	Description
`language`	`"en" \| "ja"`	Optional. For controlled mode. If not provided, component manages its own state
`onChange`	`(language: "en" \| "ja") => void`	Optional. Callback when language changes
`className`	`string`	Optional. Additional CSS classes

Features

Flag Icons: Visual indicators with 🇬🇧 (UK) and 🇯🇵 (Japan) flags
Dropdown Design: Clean dropdown selector showing current language
Full Language Names: Displays "English" and "日本語" with flags
Built-in Persistence: Automatically saves language preference to localStorage
Uncontrolled Mode: Works out-of-the-box without state management
Controlled Mode: Can be controlled externally if needed
Compact: Suitable for headers, toolbars, or inline placement
Accessible: Keyboard navigable and screen reader friendly

Examples

Basic Usage (Uncontrolled)

The simplest way to use the component - it automatically manages state and persistence:

import { LanguageSelector } from '@/components/ui/language-selector';

export function MyApp() {
  return <LanguageSelector />;
}

The component will:

Load the saved language preference on mount
Save language changes to localStorage automatically
Default to "en" if no preference is saved

With Localized Components (Uncontrolled)

Use onChange callback to sync language with other components:

import { useState, useEffect } from 'react';
import { LanguageSelector, LanguageManager } from 'sgerp-frontend-lib';
import { SGERPLogin } from '@/components/ui/sgerp-login';

export function MyApp() {
  const [language, setLanguage] = useState<"en" | "ja">("en");

  // Load initial language on mount
  useEffect(() => {
    setLanguage(LanguageManager.getLanguage());
  }, []);

  return (
    <div>
      <div className="flex justify-end mb-4">
        <LanguageSelector onChange={setLanguage} />
      </div>

      <SGERPLogin language={language} />
    </div>
  );
}

In a Header

import { LanguageSelector } from '@/components/ui/language-selector';

export function Header() {
  return (
    <header className="flex items-center justify-between p-4">
      <h1>My App</h1>
      <LanguageSelector />
    </header>
  );
}

Controlled Mode

For full control over the language state:

import { useState } from 'react';
import { LanguageSelector } from '@/components/ui/language-selector';
import { SGERPLogin } from '@/components/ui/sgerp-login';

export function MyApp() {
  const [language, setLanguage] = useState<"en" | "ja">("en");

  return (
    <div>
      <LanguageSelector language={language} onChange={setLanguage} />
      <SGERPLogin language={language} />
    </div>
  );
}

Note: In controlled mode, the component does NOT save to localStorage automatically. You manage the state entirely.

Use with SGERP Components

This component is designed to work with localized SGERP components. Pass the selected language to components that support the language prop:

Language Selector

Live Example