Locale | Ark UI

Undefined

Utilities

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 '../locale-provider'

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

import { LocaleProvider } from '../locale-provider'

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

<script setup lang="ts">
import { LocaleProvider } from '../'
</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 '../use-locale-context'

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

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

import { useLocaleContext } from '../use-locale-context'

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

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

<script setup lang="ts">
import { useLocaleContext } from '../'

const locale = useLocaleContext()
</script>

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

API Reference

Highlight

Presence