Locale

A provider that manages locale-specific settings like text direction and number formatting.

Usage

The Locale component (internally LocaleProvider) provides localization settings to all child components. This includes the locale string (e.g., en-US, ar-EG) and the text direction (dir).

import { Locale } from "@elemnts-ui/react"

<Locale locale="de-DE">
  <YourComponent />
</Locale>

Examples

Right-to-Left (RTL)

The Locale component can also manage the text direction. This is useful for components that need to adjust their layout or behavior for RTL languages.

useFilter

The useFilter hook provides locale-aware string filtering, which is useful for components like Combobox or Select when implementing search functionality.

import { useFilter } from "@elemnts-ui/react"

const filter = useFilter({ sensitivity: 'base' })
const items = ['Apple', 'Banana', 'Orange']
const filteredItems = items.filter(item => filter.contains(item, searchQuery))

API Reference

The Locale component accepts all props from the Ark UI Locale Provider component.

Prop	Type	Default
locale	`string`	`en-US`