# Module 7 : SmartCommon - Hooks

> SmartCommon fournit des hooks spécialisés pour les applications SmartMaker. Ce module couvre les hooks essentiels pour l'API, l'état, les utilitaires et la synchronisation offline.


## Prérequis

- Module 3 complété (hooks React fondamentaux)
- Module 6 complété (composants SmartCommon)


## Catégories de hooks

SmartCommon organise ses hooks en quatre catégories :

^ Catégorie ^ Hooks ^ Usage ^
| Globaux | useApi, useGlobalStates, useNavigation, useConfirm, usePWAUpdate | Contexte application |
| Locaux | useStates, useForm, useDb | État composant |
| Utilitaires | useIntl, useWindow, useFile, useAnimation, useListDnD | Helpers divers |
| Sync | useSyncClient, useOnlineStatus, useCachedQuery, useAuthenticatedImage | Offline-first |


## Chapitres

^ # ^ Chapitre ^ Contenu ^
| 1 | [[:15_training:module7-smartcommon-hooks:useapi|useApi]] | Requêtes API avec authentification JWT |
| 2 | [[:15_training:module7-smartcommon-hooks:etat|Gestion d'état]] | useGlobalStates, useStates, useForm, useConfirm, usePWAUpdate |
| 3 | [[:15_training:module7-smartcommon-hooks:utilitaires|Utilitaires]] | useIntl, useWindow, useDb, useFile, useAnimation, useListDnD |
| 4 | [[:15_training:module7-smartcommon-hooks:sync|Synchronisation]] | useSyncClient, useOnlineStatus, useCachedQuery, useAuthenticatedImage |


## Import des hooks

```javascript
import {
    // Hooks globaux
    useApi,
    useGlobalStates,
    useNavigation,
    useLibConfig,
    useConfirm,
    usePWAUpdate,

    // Hooks locaux
    useStates,
    useForm,
    useDb,

    // Hooks utilitaires
    useIntl,
    useWindow,
    useFile,
    useAnimation,
    useListDnD,

    // Hooks sync / offline
    useSyncClient,
    useOnlineStatus,
    useCachedQuery,
    useAuthenticatedImage,

    // Composants sync
    ConflictResolver
} from '@cap-rel/smartcommon';
```


## Objectifs du module

À la fin de ce module, vous saurez :

- Faire des requêtes API authentifiées avec useApi
- Gérer l'état global avec useGlobalStates
- Gérer l'état local avec useStates et useForm
- Utiliser les hooks utilitaires (formatage, fenêtre, fichiers)
- Implémenter une application offline-first avec useSyncClient


## Tableau récapitulatif

^ Hook ^ Catégorie ^ Description ^
| useApi | Global | Appels API avec auth JWT |
| useGlobalStates | Global | État global persistant |
| useNavigation | Global | Navigation React Router |
| useLibConfig | Global | Configuration de l'app |
| useConfirm | Global | Dialogues de confirmation |
| usePWAUpdate | Global | Mises à jour PWA |
| useStates | Local | État local avec path notation |
| useForm | Local | Gestion de formulaires |
| useDb | Local | Base IndexedDB (Dexie) |
| useIntl | Utilitaire | Formatage dates/nombres |
| useWindow | Utilitaire | Dimensions fenêtre |
| useFile | Utilitaire | Manipulation fichiers |
| useAnimation | Utilitaire | Animations Framer Motion |
| useListDnD | Utilitaire | Drag and drop listes |
| useSyncClient | Sync | Synchronisation offline-first |
| useOnlineStatus | Sync | Détection online/offline |
| useCachedQuery | Sync | Cache de requêtes |
| useAuthenticatedImage | Sync | Images authentifiées avec cache |


[[:15_training:module7-smartcommon-hooks:useapi|Commencer : useApi →]]