@kopynator/react

React wrapper for the Kopynator i18n platform. Works with React 18+ and supports SSR (Next.js/Remix).

Features

• Context API: Access translations anywhere in your component tree.
• Hooks-based: Easy to use with the useKopy hook.
• SSR Ready: Safe to use in server-side rendering environments.

Installation

npm install @kopynator/core @kopynator/react

Usage

1. Configuration

Wrap your application with the KopyProvider:

import { KopyProvider } from '@kopynator/react';

const config = {
  apiKey: 'YOUR_API_KEY', // Get it from https://www.kopynator.com
  defaultLocale: 'en',
  mode: 'hybrid', // 'local' | 'hybrid' | 'live'
  languages: ['en', 'es']
};

function App() {
  return (
    <KopyProvider config={config}>
      <MyComponent />
    </KopyProvider>
  );
}

Configuration Options

| Option | Type | Description | |---|---|---| | apiKey | string | Required. Your public project token found at kopynator.com. | | defaultLocale | string | Required. The fallback language if no other is detected (e.g. 'en'). | | languages | string[] | Required for 'local' mode. Array of supported language codes. | | mode | 'local' \| 'hybrid' \| 'live' | Determines how translations are loaded. |

2. In Components

Use the useKopy hook to access translation functions:

import { useKopy } from '@kopynator/react';

function MyComponent() {
  const { t, setLocale, isReady } = useKopy();

  if (!isReady) return <p>Loading...</p>;

  return (
    <div>
      <h1>{t('welcome_title')}</h1>
      <p>{t('greeting', { name: 'User' })}</p>
      
      <button onClick={() => setLocale('es')}>Español</button>
      <button onClick={() => setLocale('en')}>English</button>
    </div>
  );
}

Loading Modes

1. local: Offline First. Only loads JSON files from your local assets.
2. live: Cloud First. Fetches the latest translations directly from Kopynator CDN.
3. hybrid (Recommended): Best of Both Worlds. Loads local files instantly, then updates from Cloud in the background.