Solid

@transglot/solid connects @transglot/runtime to SolidJS 1.6 or later. JSX, memos and effects that call t recompute when the locale changes or a new publish lands for the active locale.

InstallCopy Anchor Link

npm install @transglot/solid

solid-js is a peer dependency. @transglot/runtime is installed with the package, and createClient, RuntimeError and the RuntimeClient and ClientOptions types are re-exported from it.

The package ships its components as JSX for Solid's compiler to transform, so use it through a build that compiles Solid JSX in dependencies, such as Vite with vite-plugin-solid.

Minimal setupCopy Anchor Link

Wrap your app in TransglotProvider and pass the runtime client options:

import { TransglotProvider } from '@transglot/solid';
import { render } from 'solid-js/web';
import { App } from './App';

render(
  () => (
    <TransglotProvider
      options={{
        baseUrl: 'https://api.transglot.ai',
        project: 42,
        cdnKey: 'taicdn_your_key',
        locale: 'en',
        authIn: 'query',
      }}
    >
      <App />
    </TransglotProvider>
  ),
  document.getElementById('root')!,
);

Then translate in any component below it:

import { T, useTranslations } from '@transglot/solid';

export function Header() {
  const { t, locale, setLocale } = useTranslations();

  return (
    <header>
      <h1>{t('home.title')}</h1>
      <p>{t('cart.items', { count: 3 })}</p>
      <T keypath="home.greeting" params={{ name: 'Ada' }} />
      <button onClick={() => void setLocale(locale() === 'en' ? 'fr' : 'en')}>{locale()}</button>
    </header>
  );
}

The provider starts loading the initial locale when it is created and does not wait for it. Until the bundle arrives, t returns keys; JSX that reads t updates when it lands.

APICopy Anchor Link

TransglotProviderCopy Anchor Link

Pass exactly one of options or client. The provider creates or adopts the client once.

useTranslations()Copy Anchor Link

Returns a Translation. Throws [transglot] useTranslations() must be used inside <TransglotProvider>. outside a provider.

TCopy Anchor Link

Renders a translation as text.

createTranslation(client)Copy Anchor Link

createTranslation(client: RuntimeClient): Translation builds the same reactive object without a provider. Call it inside a reactive owner (a component or createRoot): it subscribes to the client and unsubscribes when the owner is cleaned up.

Other exportsCopy Anchor Link

• TransglotContext: the Solid context the provider fills.
• Types: TransglotProviderProps, TProps, Translation.

ErrorsCopy Anchor Link

The provider does not catch a failed first load, and setLocale rejects with the runtime's RuntimeError (see Errors). To handle the first load, create the client yourself and track the load with a resource:

import { TransglotProvider, createClient } from '@transglot/solid';
import { ErrorBoundary, Show, createResource } from 'solid-js';
import { render } from 'solid-js/web';
import { App } from './App';

const client = createClient({
  baseUrl: 'https://api.transglot.ai',
  project: 42,
  cdnKey: 'taicdn_your_key',
  locale: 'en',
  authIn: 'query',
});

render(() => {
  const [ready] = createResource(() => client.loadLocale('en').then(() => true));

  return (
    <ErrorBoundary fallback={(error) => <p>Translations could not load: {error.slug}</p>}>
      <Show when={ready()}>
        <TransglotProvider client={client}>
          <App />
        </TransglotProvider>
      </Show>
    </ErrorBoundary>
  );
}, document.getElementById('root')!);

RelatedCopy Anchor Link

• JavaScript runtime
• Runtime SDKs overview