DocsBlog
  • 0.25.3

  • light

    dark

    system

    Switch mode
  • Cerberus

    Acheron

    Elysium

Get Started
Components
Styling
Theming

Concepts

OverviewCompositionTesting

Layout

Aspect RatioBleedBoxCenterContainerDividerFlexFloatGridLink OverlayScrollableStackWrap

Components

AccordionAdmonitionAvatarButtonCarouselCheckboxClipboardCollapsibleComboboxConfirm ModalCTAModalDate PickerDialogFieldFieldsetFile UploaderIcon ButtonInputLoading StatesMenuNotificationsNumber InputPin InputProgressPrompt ModalRadioRatingSelectSplit ButtonSwitchTableTabsTagTextTextareaToggleTooltip

Utilities

Client OnlyDownload TriggerEnvironmentFeature FlagsFocus TrapForFormat ByteFormat NumberFormat Relative TimeFrameHighlightJSON Tree ViewLocaleLocal StoragePortalPresenceShowsplitPropsTheme

Locale

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

  • npm
  • Ark

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 '@cerberus/react'
export const App = () => {
return <LocaleProvider locale="de-DE">{/* Your App */}</LocaleProvider>
}

Usage

To access the current locale and direction settings, use the useLocaleContext hook.

import { useLocaleContext } from '@cerberus/react'
export const Usage = () => {
const { locale, dir } = useLocaleContext()
return <pre>{JSON.stringify({ locale, dir }, null, 2)}</pre>
}

API Reference

LocaleProvider Props:

PropTypeRequiredDescription
localestringYesThe locale to use for the application.

On this page

  • Edit this page on Github
Cerberus Design System | Docs