PxlKitLocaleProvider

Sets the locale for every nested PxlKit component: lang on a layout-neutral wrapper, locale-aware upper/lower helpers and the matching Google Fonts URL.

  • Sets lang on a wrapper so CSS text-transform handles Turkish i → İ correctly
  • Builds Google Fonts URL with the correct subsets (latin-ext for Turkish)
  • Exposes locale-aware upper() and lower() helpers via usePxlKitLocale() (injectPxlKitLocale() in Angular)
  • Supports BCP 47 locales en and tr out of the box
Status
stable
Category
overlay-foundation
Since
v1.6.0

API

import { PxlKitLocaleProvider } from '@pxlkit/ui-kit';
PropTypeDefaultDescription
locale'en' | 'tr''en'BCP 47 locale tag. Default 'en'.
children (required)React.ReactNode—The part of the app that follows the locale.

Accessibility

WCAG target: 2.1 AA

  • sets lang/dir context for descendants; no direct ARIA

Wraps its content in a layout-neutral element carrying lang (in Angular, the host element) so assistive tech and CSS text-transform pick up the correct language. In server-rendered apps (Next.js, Nuxt, Angular SSR), also set lang on the <html> tag.

Usage

import { PxlKitLocaleProvider } from '@pxlkit/ui-kit';

export function Default() {
  return (
    <PxlKitLocaleProvider locale="en">
      <p>Hello, world!</p>
    </PxlKitLocaleProvider>
  );
}

Examples

Default

import { PxlKitLocaleProvider } from '@pxlkit/ui-kit';

export function Default() {
  return (
    <PxlKitLocaleProvider locale="en">
      <p>Hello, world!</p>
    </PxlKitLocaleProvider>
  );
}

Turkish

import { PxlKitLocaleProvider } from '@pxlkit/ui-kit';

export function Turkish() {
  return (
    <PxlKitLocaleProvider locale="tr">
      <p>İstanbul güneşli bir şehirdir</p>
    </PxlKitLocaleProvider>
  );
}