Locale
Locale provider for setting the locale and direction of the app.
Setup
The LocaleProvider component sets the locale for your app, formatting dates, numbers, and other
locale-specific data.
Note: If no
LocaleProvideris setup, the default locale for the app will been-USand therefore the direction will beltr.
import { LocaleProvider } from '@ark-ui/react/locale'
export const App = () => {
return <LocaleProvider locale="de-DE">{/* Your App */}</LocaleProvider>
}
import { LocaleProvider } from '@ark-ui/solid/locale'
export const App = () => {
return <LocaleProvider locale="de-DE">{/* Your App */}</LocaleProvider>
}
<script setup lang="ts">
import { LocaleProvider } from '@ark-ui/vue/locale'
</script>
<template>
<LocaleProvider locale="de-DE"><!-- Your App --></LocaleProvider>
</template>
Usage
To access the current locale and direction settings, use the useLocaleContext hook.
import { useLocaleContext } from '@ark-ui/react/locale'
export const Usage = () => {
const { locale, dir } = useLocaleContext()
return <pre>{JSON.stringify({ locale, dir }, null, 2)}</pre>
}
import { useLocaleContext } from '@ark-ui/solid/locale'
export const Usage = () => {
const locale = useLocaleContext()
return <pre>{JSON.stringify(locale(), null, 2)}</pre>
}
<script setup lang="ts">
import { useLocaleContext } from '@ark-ui/vue/locale'
const locale = useLocaleContext()
</script>
<template>
<pre>{{ JSON.stringify(locale, null, 2) }}</pre>
</template>