• Docs
  • Blog
    • 0.25.1

    • 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