Selection and preferences

useLanguageToggle

Coordinates controlled or uncontrolled locale cycling, persistence, and document language synchronization for React applications.

Copy React example LanguageToggle component

Live component preview · Astro

Explore LanguageToggle

Try the component this hook connects to. The preview uses the Astro adapter; the React example below uses useLanguageToggle.

React usage

Import from @santi020k/lumen-react and spread the controller props onto the matching components.

import { LanguageToggle } from '@santi020k/lumen-react'

export function LocaleControl() {
  return (
    <LanguageToggle
      defaultValue="en"
      storageKey="site-language"
      locales={[
        { label: 'English', value: 'en' },
        { label: 'Español', value: 'es' }
      ]}
    />
  )
}

import { LanguageToggle } from '@santi020k/lumen-react'

export function LocaleControl() {
  return (
    <LanguageToggle
      defaultValue="en"
      storageKey="site-language"
      locales={[
        { label: 'English', value: 'en' },
        { label: 'Español', value: 'es' }
      ]}
    />
  )
}

Load @santi020k/lumen-react/styles.css once in your application. With React Server Components, put 'use client' at the top of the module that calls the hook. Follow the React setup guide for the framework boundary.

Options

Property	Type	Default	Description
defaultValue	string	first locale	Initial uncontrolled locale value.
value	string	-	Controlled locale value.
locales	LumenLocaleOption[]	English and Spanish	Ordered locale values and visible labels.
storageKey	string	-	Persists and restores the uncontrolled locale when storage is available.
onValueChange	(value: string) => void	-	Receives the next requested or applied locale.

Controller return values

Property	Type	Description
value	string	Current locale value.
currentLocale	LumenLocaleOption	Current locale value and label.
nextLocale	LumenLocaleOption	Next locale value and label.
selectNext	() => void	Requests or applies the next locale.