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 LocaleProvider is setup, the default locale for the app will be en-US and therefore the direction will be ltr.

import { LocaleProvider } from '@ark-ui/react'

export const App = () => {
  return <LocaleProvider locale="de-DE">{/* Your App */}</LocaleProvider>
}

import { LocaleProvider } from '@ark-ui/solid'

export const App = () => {
  return <LocaleProvider locale="de-DE">{/* Your App */}</LocaleProvider>
}

<script setup lang="ts">
import { LocaleProvider } from '@ark-ui/vue'
</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'

export const Usage = () => {
  const { locale, dir } = useLocaleContext()

  return <pre>{JSON.stringify({ locale, dir }, null, 2)}</pre>
}

import { useLocaleContext } from '@ark-ui/solid'

export const Usage = () => {
  const locale = useLocaleContext()

  return <pre>{JSON.stringify(locale(), null, 2)}</pre>
}

<script setup lang="ts">
import { useLocaleContext } from '@ark-ui/vue'

const locale = useLocaleContext()
</script>

<template>
  <pre>{{ JSON.stringify(locale, null, 2) }}</pre>
</template>

API Reference

LocaleProvider

Prop	Default	Type
`locale`	`'en-US'`	`string` The locale to use for the application.