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 API requests with JWT authentication
2 State Management useGlobalStates, useStates, useForm, useConfirm, usePWAUpdate
3 Utilities useIntl, useWindow, useDb, useFile, useAnimation, useListDnD
4 Synchronization useSyncClient, useOnlineStatus, useCachedQuery, useAuthenticatedImage

Hook Imports

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 ->