@kekalma/language-selector v1.0.1

Language selector menu for React

A flexible language selector component for React, where you can change the format and the look with many options. The actual state is stored in a context, whose value can be used in other parts of the project.
Part of the @kekalma component family.

Usage examples

The following simple code example demonstrates the use of the language selector, with separate (optional) context and an event handler function.
You should use at least one of context or onLanguageChange properties.

App.tsx

The <LanguageSelector> component can be placed into an <ul> element, as it produces a list item.

import React,{useState} from 'react'
import {LanguageSelector as Language, emptyLanguage} from '@kekalma/language-selector'
import type { languageType } from '@kekalma/language-selector'
import { languageContext } from './context'
import Info from './Info'
import { languages } from './languageList'

export default function App() {
  const [selectedLanguage, setSelectedLanguage] = useState<languageType>(emptyLanguage);
  const changeHandler = (newLang: languageType, oldLang: languageType) => {
    console.log("The language has been changed: ", oldLang.name, " -> ", newLang.flag)
  }
  return (
    <languageContext.Provider value={{language: selectedLanguage, setLanguage: setSelectedLanguage}}>
    <Info context={languageContext}/>
    <ul>
      <Language
          languages={languages}
          selectedLanguageFlag="us"   
          context={languageContext}
          onLanguageChange={changeHandler}
      />
    </ul>
      <Info/>
    </languageContext.Provider>
  )
}

languageList.ts

import React from 'react'
import type { languageType } from '@kekalma/language-selector'

export const languages: languageType[] = [
  { "code": "hu","name": "Hungarian" },
  { "code": "de","name": "German" },
  { "code": "en","name": "US English","flag": "us" },
  { "code": "en","name": "British English","flag": "gb" },
  { "code": "fr","name": "French" }
]

Note the use of the 'flag' property. It is only necessary, if the same language may be used with a different flag from country to country. The flag is the key, it should be unique!

context.ts

import React, {createContext} from 'react'
import type {languageType, languageContextType } from '@kekalma/language-selector'
import {emptyLanguage } from '@kekalma/language-selector'

export const languageContext = createContext<languageContextType>({
  language: emptyLanguage,
  setLanguage: (value: languageType):void =>{}
})

info.tsx

In this component you get an example, how to use the value from the context.

import React, {useContext} from 'react'
import { languageContext } from './context'
import {languageContextType} from '@kekalma/language-selector'

type myProps = { context: React.Context<languageContextType> }

export default function Info(props : myProps) {
  const { language : selectedLanguage } = useContext(props.context)
  return (
    <span style={{margin: "0 5px"}}>Selected language: {selectedLanguage.name} ({selectedLanguage.code}_{selectedLanguage.flag})</span>
  )
}

The currently selected value is stored in the following format (languageType):

{
  code: string,   // ISO language code (2 chars)
  name: string,   // Language name
  flag: string    // Flag code (2 chars)
}

Property parameters

_Only the bold properties are obligatory, all others are optional, but you should use one of context or onLanguageChange._

Exported items:

Format examples with property code samples:

dropdown:

titleFormat="|Flag| |Name|"
menuFormat="|Flag| |Name| (|Code|_|FlagCode|)"
format="dropdown"
align="left"

dropdown-ordered:

titleFormat="|Flag| |Name|"
menuFormat="|Flag| |Name|"
format="dropdown-ordered"

flat:

titleFormat="|Flag| |Name|"
menuFormat="|Flag| |Name|"
format="flat"

titleFormat="|Flag| |Name|"
menuFormat="|Flag| |Name|"
format="flat-reverse"
align="right"

titleFormat="|Flag| |Name|"
menuFormat="|Flag| |Name|"
format="flat"
align="center"

linear:

titleFormat="|Flag| |Name|"
menuFormat="|Flag| |Name|"
format="linear-ordered"

License

MIT © kissato70

Support the project >>> Donation