@ciao-tools/react

React hooks and components for Ciao Tools translations.

Installation

npm install @ciao-tools/react

Usage

import { useCt, CiaoProvider, LanguageSwitcher } from "@ciao-tools/react";
import manifest from "./ciao-manifest.json";

function App() {
  return (
    <CiaoProvider manifest={manifest}>
      <LanguageSwitcher />
      <Content />
    </CiaoProvider>
  );
}

function Content() {
  const ct = useCt();
  return <h1>{ct("Hello, world!")}</h1>;
}

Exports

Hooks

• useCt() - Returns the translation function
• useLanguage() - Language state and controls
• useCurrentLanguage() - Current language code
• useSetLanguage() - Function to change language
• useAvailableLanguages() - List of available languages
• useIsLoading() - Loading state
• useIsReady() - Ready state

Components

• CiaoProvider - Translation provider with CDN loading
• CTContextBlock - Group related strings for context
• Trans - Translate JSX with nested elements
• LanguageSwitcher - Language selection UI

Utilities

• interpolate() - String interpolation with formatting
• getLanguageInfo() - Get language metadata
• LANGUAGE_DATA - Language names, native names, and flags

Documentation

See docs.ciao-tools.com/react for full documentation.

License

MIT