React (‏Vite وCRA)

import { init, type Siyak } from 'siyak-js';

export const siyak: Siyak = init({
  apiKey: import.meta.env.VITE_SIYAK_KEY,
  endpoint: import.meta.env.VITE_SIYAK_URL,
  target: 'ar',
  // cache:false in tests and Storybook; leave localStorage on in the app.
  cache: import.meta.env.MODE === 'test' ? false : undefined,
});

import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
import { siyak } from './siyak';

const Ctx = createContext(siyak);

export function SiyakProvider({ children }: { children: ReactNode }) {
  const [ready, setReady] = useState(false);
  useEffect(() => {
    void siyak.preload();          // one request, every known string
    siyak.onReady.then(() => setReady(true));
  }, []);
  return <Ctx.Provider value={siyak}>{children}</Ctx.Provider>;
  // ready is only here to force one repaint after the batch lands.
}

export const useSiyak = () => useContext(Ctx);

const { t } = useSiyak();

<button>{t('Continue', 'screen:checkout')}</button>