---
source_hash: "d49021ba"
title: "Module 7: SmartCommon - Hooks"
weight: 570
description: "SmartCommon organizes its hooks into four categories:"
category: "Training"
type: "training"
---

# Module 7: SmartCommon - Hooks

> SmartCommon provides specialized hooks for SmartMaker applications. This module covers essential hooks for API, state, utilities, and offline synchronization.

## Prerequisites

- Module 3 completed (fundamental React hooks)
- Module 6 completed (SmartCommon components)

## Hook Categories

SmartCommon organizes its hooks into four categories:

| Category | Hooks | Usage |
| --- | --- | --- |
| Global | useApi, useGlobalStates, useNavigation, useConfirm, usePWAUpdate | Application context |
| Local | useStates, useForm, useDb | Component state |
| Utilities | useIntl, useWindow, useFile, useAnimation, useListDnD | Various helpers |
| Sync | useSyncClient, useOnlineStatus, useCachedQuery, useAuthenticatedImage | Offline-first |

## Chapters

| # | Chapter | Content | |
| --- | --- | --- | --- |
| 1 | [useApi](/training/module7-smartcommon-hooks/useapi) | API requests with JWT authentication |
| 2 | [State Management](/training/module7-smartcommon-hooks/etat) | useGlobalStates, useStates, useForm, useConfirm, usePWAUpdate |
| 3 | [Utilities](/training/module7-smartcommon-hooks/utilitaires) | useIntl, useWindow, useDb, useFile, useAnimation, useListDnD |
| 4 | [Synchronization](/training/module7-smartcommon-hooks/sync) | useSyncClient, useOnlineStatus, useCachedQuery, useAuthenticatedImage |

## Hook Imports

```javascript
import {
    // Global hooks
    useApi,
    useGlobalStates,
    useNavigation,
    useLibConfig,
    useConfirm,
    usePWAUpdate,

    // Local hooks
    useStates,
    useForm,
    useDb,

    // Utility hooks
    useIntl,
    useWindow,
    useFile,
    useAnimation,
    useListDnD,

    // Sync / offline hooks
    useSyncClient,
    useOnlineStatus,
    useCachedQuery,
    useAuthenticatedImage,

    // Sync components
    ConflictResolver
} from '@cap-rel/smartcommon';
```

## Module Objectives

By the end of this module, you will know how to:

- Make authenticated API requests with useApi
- Manage global state with useGlobalStates
- Manage local state with useStates and useForm
- Use utility hooks (formatting, window, files)
- Implement an offline-first application with useSyncClient

## Summary Table

| Hook | Category | Description |
| --- | --- | --- |
| useApi | Global | API calls with JWT auth |
| useGlobalStates | Global | Persistent global state |
| useNavigation | Global | React Router navigation |
| useLibConfig | Global | App configuration |
| useConfirm | Global | Confirmation dialogs |
| usePWAUpdate | Global | PWA updates |
| useStates | Local | Local state with path notation |
| useForm | Local | Form management |
| useDb | Local | IndexedDB database (Dexie) |
| useIntl | Utility | Date/number formatting |
| useWindow | Utility | Window dimensions |
| useFile | Utility | File manipulation |
| useAnimation | Utility | Framer Motion animations |
| useListDnD | Utility | List drag and drop |
| useSyncClient | Sync | Offline-first synchronization |
| useOnlineStatus | Sync | Online/offline detection |
| useCachedQuery | Sync | Query caching |
| useAuthenticatedImage | Sync | Authenticated images with cache |

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