hook-docs — documenter un hook à la manière de ReactUse
La documentation se trouve dans le site Astro packages/website-astro. La barre latérale et les routes sont construites
automatiquement à partir des chemins de fichiers — il n'y a pas de routes.json ni de configuration de barre latérale à modifier.
Emplacements des fichiers (un par locale)
packages/website-astro/src/content/docs/{category}/useX.mdx # Anglais
packages/website-astro/src/content/docs-zh-hans/{category}/useX.mdx # 简体中文
packages/website-astro/src/content/docs-zh-hant/{category}/useX.mdx # 繁體中文
{category} est l'un des suivants : browser, effect, element, state, integrations. Le dossier
que vous choisissez est la catégorie — il définit l'entrée du registre et l'URL canonique
(https://reactuse.com/{category}/usex/, en minuscules).
Frontmatter
Le schéma se trouve dans packages/website-astro/src/content.config.ts — seul title est requis ;
description, sidebar_label, sidebar_position sont facultatifs. Suivez le style existant :
---
title: useX – Utilisation et exemples du hook d'état
sidebar_label: useX
description: "useX est un hook React qui … (une phrase, utilisée comme méta-description)."
---
Structure du corps
Suivez la forme établie (voir content/docs/browser/useClipboard.mdx) :
# useX
Résumé en une ligne de ce qu'il fait.
Un court paragraphe expliquant le hook, avec un lien vers la page MDN/spécification pertinente si utile.
### Quand l'utiliser
- puce d'un cas d'usage concret
- un autre
### Remarques
- sécurité SSR / limitations de prise en charge du navigateur
- tout piège éventuel
## Utilisation
```tsx live
function Demo() {
const [value, set] = useX(0);
return <button onClick={() => set(value + 1)}>{value}</button>;
};
%%API%%
- La délimitation ` ```tsx live ` affiche une démo interactive modifiable. Écrivez la démo **en ligne** — elle
n'est pas importée depuis le code source du hook.
- Gardez `%%API%%` comme dernière ligne. Elle est remplacée à la génération par le tableau d'API généré
(à partir du JSDoc de `interface.ts` du hook) ; si aucun document d'API n'existe encore, elle est supprimée silencieusement.
## Traductions
Les fichiers zh-Hans / zh-Hant reflètent exactement la structure anglaise — traduisez le texte et
le `title`/`description` du frontmatter, gardez la démo de code identique.
zh-Hans → zh-Hant n'est pas une simple conversion de caractères ; ces termes diffèrent :
| 简体 | 繁體 | | 简体 | 繁體 |
|------|------|-----|------|------|
| 状态 | 狀態 | | 默认 | 預設 |
| 函数 | 函數 | | 设置 | 設定 |
| 参数 | 參數 | | 获取 | 獲取 |
| 组件 | 組件 | | 监听 | 監聽 |
| 类型 | 類型 | | 处理 | 處理 |
| 数组 | 數組 | | 实例 | 實例 |
| 对象 | 對象 | | 管理 / 配置 | inchangé |
## Après l'écriture — regénérer le registre
```bash
bash scripts/generate-hook-registry.sh
Ce script parcourt le dossier de documentation anglaise et réécrit scripts/hook-registry.json
(nomDuHook → { category, url }). Nécessaire pour que les liens du blog/de la documentation se résolvent correctement. Vérifiez que le
nouveau hook apparaît avec la bonne catégorie et une URL en minuscules.