React

Setup

Wrap your app once with ThlProvider:

import { createRoot } from 'react-dom/client';
import { ThlProvider } from '@thl-ui/react';
import '@thl-ui/styles/thl-ui.css';
import { App } from './App';

createRoot(document.getElementById('root')!).render(
  <ThlProvider config={{
    locale: 'en',
    theme: 'green-dark',
    colorMode: 'auto',
    persist: true,
    components: { Table: { pageSize: 25 }, Toast: { position: 'bottom-right' } },
  }}>
    <App />
  </ThlProvider>,
);

ThlProvider also accepts an existing instance created with createThl() — useful to share one config between React and non-React code. It is safe under StrictMode (listeners detach/re-attach on remount).

Hooks

Hook	Returns
useThlConfig()	[config, set] — current config and a setter (set({ theme: 'red' }))
useT()	t(key, params) with t.n(), t.d(), t.locale
useLocale()	[locale, setLocale]
useToast()	toast manager: success, info, warning, error, show, dismiss
useDefaults(name, props)	props merged with config.components[name]
usePrefix()	class prefix (default thl)
useThl()	the raw ThlInstance

import { Button, useT, useToast, useThlConfig } from '@thl-ui/react';

export function SaveBar() {
  const t = useT();
  const toast = useToast();
  const [config, set] = useThlConfig();
  return (
    <>
      <Button variant="success" onClick={() => toast.success(t('common.save'))}>{t('common.save')}</Button>
      <Button onClick={() => set({ colorMode: config.colorMode === 'dark' ? 'light' : 'dark' })}>🌓</Button>
      <span>{t.n(1234.5, { style: 'currency', currency: 'USD' })}</span>
    </>
  );
}

Controlled inputs

Controls follow React conventions: value / checked + onChange(value). Native inputs (Input, Textarea) pass through all native props and forward refs.

const [country, setCountry] = useState<string | null>('vn');
<Select options={countries} value={country} onChange={setCountry} searchable clearable />
<Switch checked={on} onChange={setOn} />
<DatePicker value={date} onChange={setDate} />

Forms & validation

import { Form, Field, Input, Button, rules } from '@thl-ui/react';

<Form values={v} onSubmit={(values, ok) => ok && save(values)}>
  <Field label="Email" name="email" value={v.email} rules={[rules.required(), rules.email()]} required>
    {(id) => <Input id={id} type="email" value={v.email} onChange={(e) => setV({ ...v, email: e.target.value })} />}
  </Field>
  <Button type="submit" variant="primary">Submit</Button>
</Form>

Error messages are i18n keys (validation.*), so they switch language with the app.

Routing (AppLayout)

Pass renderLink so the side menu uses your router:

import { Link, useLocation } from 'react-router';

<AppLayout menu={menu} currentPath={loc.pathname} user={user}
  renderLink={(item, children, className) => <Link to={item.href!} className={className}>{children}</Link>}>
  <Routes>…</Routes>
</AppLayout>

confirm()

import { confirm } from '@thl-ui/react';
if (await confirm({ icon: 'warning', title: 'Delete?' })) remove();

confirm() uses the <ConfirmHost/> that AppLayout renders; outside a layout render <ConfirmHost/> and <Toaster/> once yourself.