Hoppa till huvudinnehåll

Lokalisering

React Aria har en rad inbyggda funktioner som underlättar skapandet av tillgängliga och internationella användargränssnitt. Komponenterna i Midas, som bygger på React Aria, uppdateras automatiskt när språkmiljön ändras. Som standard används användarens språkinställning i webbläsaren för att välja språk och lokalisering i komponenterna. Om användarens inställning inte motsvarar något av de språk som stöds används svenska som standard. För närvarande stöder Midas officiellt svenska och engelska, medan React Aria har stöd för ytterligare språk. För mer detaljerad dokumentation, se React Aria Internationalization.

Det finns flera sätt att kontrollera och anpassa lokaliseringen. Nedan följer en översikt över de viktigaste funktionerna.

useLocale​

För att läsa av aktuell språkinställning och riktning (LTR/RTL) i applikationen kan du användauseLocale från React Aria. Normalt fungerar locale utan att behöva importeras explicit, men vid till exempel SSR bör useLocale användas, se React Aria för mer information.

import { useLocale } from 'react-aria-components'

export default function App() {
  const { locale, direction } = useLocale()

  return (
    <html
      lang={locale}
      dir={direction}
    >
      {/* your app here */}
    </html>
  )
}
Nuvarande språkNuvarande textriktning
en-USltr

I18nProvider​

Om det finns behov av att åsidosätta användarens inställningar kan detta göras via I18nProvider. Med I18nProvider kan du styra beteendet för datum- och tidsrelaterade komponenter, men inte ta kontroll över felmeddelanden eller annan information, då detta styrs av webbläsaren.

import { I18nProvider } from 'react-aria-components'
<I18nProvider locale={locale}>
  <DateField />
</I18nProvider>
Format kan styras med i18nProvider
28022025

Validering och felmeddelanden beror av inställningarna i webbläsaren

useLocalizedStringFormatter​

För att översätta eller anpassa enskilda textsträngar kan du använda useLocalizedStringFormatter. För siffror och valutor finns motsvarande funktionalitet i useNumberFormatter.