React

Thiết lập

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

createRoot(document.getElementById('root')!).render(
  <ThlProvider config={{ locale: 'vi', theme: 'green-dark', colorMode: 'auto', persist: true }}>
    <App />
  </ThlProvider>,
);

An toàn với StrictMode (listener tự gỡ/gắn lại khi remount). Có thể truyền instance tạo sẵn bằng createThl().

Hooks

Hook	Trả về
useThlConfig()	[config, set]
useT()	t(key, params) kèm t.n(), t.d(), t.locale
useLocale()	[locale, setLocale]
useToast()	success, info, warning, error, show, dismiss
useDefaults(name, props)	props đã gộp với config.components[name]

const t = useT();
const toast = useToast();
const [config, set] = useThlConfig();
<Button variant="success" onClick={() => toast.success(t('common.save'))}>{t('common.save')}</Button>
<Button onClick={() => set({ colorMode: config.colorMode === 'dark' ? 'light' : 'dark' })}>🌓</Button>

Control có kiểm soát

Theo quy ước React: value / checked + onChange(value); Input, Textarea nhận mọi prop native và forward ref.

<Select options={countries} value={country} onChange={setCountry} searchable clearable />
<Switch checked={on} onChange={setOn} />

Form & validation

<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} value={v.email} onChange={(e) => setV({ ...v, email: e.target.value })} />}
  </Field>
</Form>

Thông báo lỗi là khoá i18n (validation.*) nên tự đổi theo ngôn ngữ.

Router

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

confirm(): if (await confirm({ icon: 'warning' })) remove(); — cần <ConfirmHost/> (đã có trong AppLayout).