KumoLocaleProvider

Kumo components come with default English text. To localize them, wrap your app with KumoLocaleProvider and provide a translations object. Only specify the keys you want to override — the rest will fall back to English defaults. The KumoTranslations type is exported from @cloudflare/kumo for TypeScript autocompletion.

Chinese Localization

Override the default pagination labels with Chinese translations.

显示 1-25 条，共 500 条

每页:

import { KumoLocaleProvider, Pagination, KumoTranslationsPartial } from "@cloudflare/kumo";
import { useMemo, useState } from "react";

export function KumoLocaleProviderChineseDemo() {
  const [page, setPage] = useState(1);
  const [perPage, setPerPage] = useState(25);

  const trans = useMemo(
    () =>
      ({
        pagination: {
          perPage: "每页",
          showInfo: "显示 {range} 条，共 {total} 条",
        },
      }) as KumoTranslationsPartial,
    [],
  );

  return (
    <KumoLocaleProvider translations={trans}>
      <Pagination
        page={page}
        setPage={setPage}
        perPage={perPage}
        totalCount={500}
      >
        <Pagination.Info />
        <Pagination.Separator />
        <Pagination.PageSize
          value={perPage}
          onChange={(size) => {
            setPerPage(size);
            setPage(1);
          }}
        />
        <Pagination.Controls />
      </Pagination>
    </KumoLocaleProvider>
  );
}

French Localization

French translations for the pagination labels.

Affichage de 1-25 sur 500 éléments

Par page:

import { KumoLocaleProvider, Pagination, KumoTranslationsPartial } from "@cloudflare/kumo";
import { useMemo, useState } from "react";

export function KumoLocaleProviderFrenchDemo() {
  const [page, setPage] = useState(1);
  const [perPage, setPerPage] = useState(25);

  const trans = useMemo(
    () =>
      ({
        pagination: {
          perPage: "Par page",
          showInfo: "Affichage de {range} sur {total} éléments",
        },
      }) satisfies KumoTranslationsPartial,
    [],
  );

  return (
    <KumoLocaleProvider translations={trans}>
      <Pagination
        page={page}
        setPage={setPage}
        perPage={perPage}
        totalCount={500}
      >
        <Pagination.Info />
        <Pagination.Separator />
        <Pagination.PageSize
          value={perPage}
          onChange={(size) => {
            setPerPage(size);
            setPage(1);
          }}
        />
        <Pagination.Controls />
      </Pagination>
    </KumoLocaleProvider>
  );
}

API Reference

Component "KumoLocaleProvider" not found in registry. Run pnpm build:ai-metadata to regenerate.