---
title: "Module 7 : SmartCommon - Hooks"
weight: 570
description: "SmartCommon organise ses hooks en quatre catégories :"
category: "Formation"
type: "formation"
---

# 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 | [useApi](/training/module7-smartcommon-hooks/useapi) | Requêtes API avec authentification JWT |
| 2 | [Gestion d'état](/training/module7-smartcommon-hooks/etat) | useGlobalStates, useStates, useForm, useConfirm, usePWAUpdate |
| 3 | [Utilitaires](/training/module7-smartcommon-hooks/utilitaires) | useIntl, useWindow, useDb, useFile, useAnimation, useListDnD |
| 4 | [Synchronisation](/training/module7-smartcommon-hooks/sync) | 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 |

[Commencer : useApi ->](/training/module7-smartcommon-hooks/useapi)