Locale Provider

Usage

The LocaleProvider component sets the locale for your app, formatting dates, numbers, and other locale-specific data.

Most Chakra UI components that read the locale set by the LocaleProvider.

import { LocaleProvider, useLocaleContext } from "@chakra-ui/react"

<LocaleProvider locale="...">{/* Your App */}</LocaleProvider>

Examples

Setting Locale

Set the locale prop to the locale you want to use.

<LocaleProvider locale="ar-BH">
  <Component />
</LocaleProvider>

Reading Locale

export const Usage = () => {
  const { locale, dir } = useLocaleContext()
  return <pre>{JSON.stringify({ locale, dir }, null, 2)}</pre>
}

Props