---
title: "Configuration du Provider"
weight: 110
---

# Configuration du Provider

Le `Provider` de SmartCommon accepte un objet de configuration qui permet de personnaliser le comportement de l'application.

## Configuration de base

```
// src/App.jsx

import { Provider } from '@cap-rel/smartcommon';
import "@cap-rel/smartcommon/dist/smartcommon-style.css";

const config = {
  debug: true,
  api: {
    prefixUrl: import.meta.env.VITE_API_URL,
    timeout: 30000
  }
};

export const App = () => (
  <Provider config={config}>
    {/* Votre application */}
  </Provider>
);
```

## Props du Provider

| Prop | Type | Description |
| --- | --- | --- |
| `config` | object | Configuration de l'application (voir ci-dessous) |
| `children` | ReactNode | Contenu de l'application |
| `onError` | Function | Callback en cas d'erreur globale |
| `errorFallback` | any | Contenu de fallback en cas d'erreur |
| `ErrorFallbackComponent` | Component | Composant de fallback en cas d'erreur |
| `pwaUpdate` | object | Configuration des mises à jour PWA (passée à `usePWAUpdate`) |

### pwaUpdate

Permet de configurer le comportement des mises à jour PWA directement sur le Provider :

```
<Provider
  config={config}
  pwaUpdate={{
    autoReload: false,
    checkInterval: 60000,
    onUpdateAvailable: () => console.log('Mise à jour disponible'),
    onUpdateActivated: () => console.log('Mise à jour activée')
  }}
>
  {/* ... */}
</Provider>
```

## ConfirmProvider

Le `ConfirmProvider` est inclus automatiquement dans le `Provider`. Il accepte un prop `labels` pour personnaliser les textes des boutons :

```
<ConfirmProvider labels={{
  confirm: 'Confirmer',
  cancel: 'Annuler',
  ok: 'OK'
}}>
  {/* ... */}
</ConfirmProvider>
```

## Configuration complète

Voici toutes les options disponibles :

```
const config = {
  // Mode debug - active les logs dans la console
  debug: true,

  // Configuration des composants
  components: {
    // Thème actif
    theme: "default",

    // Définition des thèmes personnalisés
    themes: {
      default: { /* ... */ },
      dark: { /* ... */ }
    },

    // Variants personnalisés pour les composants
    variants: {
      Button: {
        primary: { className: "bg-blue-500 text-white" },
        secondary: { className: "bg-gray-500 text-white" }
      }
    },

    // Configuration TailwindCSS
    tailwindCss: {
      mergedClass: {}
    }
  },

  // Configuration i18n
  i18n: {
    translated: true
  },

  // Configuration du stockage
  storage: {
    db: {
      compression: {}
    },
    local: {
      compression: {}
    },
    session: {
      compression: {}
    }
  },

  // Configuration de l'état global
  globalState: {
    reducers: {}
  },

  // Configuration API
  api: {
    // URL de base de l'API
    prefixUrl: "https://api.example.com",

    // Timeout des requêtes (ms)
    timeout: 30000,

    // Mode debug pour les requêtes API
    debug: true,

    // Mapping de chemins personnalisés
    paths: {
      login: "auth/login",
      logout: "auth/logout"
    },

    // Gestion d'erreurs personnalisée
    errors: {
      401: (error) => console.log("Non autorisé"),
      500: (error) => console.log("Erreur serveur")
    }
  },

  // Configuration des animations de pages
  pages: {
    "/": {
      "/dashboard": "slideLeft",
      "/settings": "slideLeft",
      "*": "fade"
    },
    "/dashboard": {
      "/": "slideRight",
      "*": "fade"
    },
    "*": "fade"
  }
};
```

## Options détaillées

### debug

Active les logs de debug dans la console pour tous les hooks et composants.

```
debug: true  // Active tous les logs
debug: false // Désactive les logs (production)
```

### api

Configuration du client HTTP (ky).

| Option | Type | Description |
| --- | --- | --- |
| `prefixUrl` | string | URL de base pour toutes les requêtes |
| `timeout` | number | Timeout en millisecondes (défaut: 30000) |
| `debug` | boolean | Active les logs des requêtes API |
| `paths` | object | Mapping de chemins personnalisés |
| `errors` | object | Handlers d'erreurs par code HTTP |

### pages

Configuration des animations de transition entre pages. Voir [Animations](/front/animations) pour plus de détails.

| Animation | Description |
| --- | --- |
| `fade` | Fondu enchaîné |
| `slideLeft` | Glissement vers la gauche |
| `slideRight` | Glissement vers la droite |
| `zoom` | Effet de zoom |

### components

Personnalisation des composants SmartCommon.

#### themes

Définition de thèmes personnalisés :

```
themes: {
  light: {
    primary: "#3b82f6",
    secondary: "#6b7280",
    background: "#ffffff"
  },
  dark: {
    primary: "#60a5fa",
    secondary: "#9ca3af",
    background: "#1f2937"
  }
}
```

#### variants

Variants personnalisés pour les composants :

```
variants: {
  Button: {
    primary: {
      className: "bg-primary text-white hover:bg-primary/90"
    },
    danger: {
      className: "bg-red-500 text-white hover:bg-red-600"
    }
  },
  Input: {
    outlined: {
      className: "border-2 border-gray-300 rounded-lg"
    }
  }
}
```

### storage

Configuration du stockage (localStorage, sessionStorage, IndexedDB).

```
storage: {
  db: {
    compression: {
      enabled: true,
      threshold: 1024 // Compresser si > 1KB
    }
  },
  local: {
    compression: {
      enabled: false
    }
  }
}
```

### globalState

Configuration de l'état global Redux.

```
globalState: {
  reducers: {
    // Reducers personnalisés à ajouter au store
    myCustomReducer: myReducerFunction
  }
}
```

## Accéder à la configuration

Utilisez le hook `useLibConfig` pour accéder à la configuration :

```
import { useLibConfig } from '@cap-rel/smartcommon';

const MyComponent = () => {
  const config = useLibConfig();

  console.log(config.debug);
  console.log(config.api.prefixUrl);

  return (/* ... */);
};
```

## Exemple complet

```
// src/App.jsx

import { Provider } from '@cap-rel/smartcommon';
import "@cap-rel/smartcommon/dist/smartcommon-style.css";
import { Router } from './components/app/Router';

const config = {
  debug: import.meta.env.DEV,
  api: {
    prefixUrl: import.meta.env.VITE_API_URL,
    timeout: 30000,
    debug: import.meta.env.DEV
  },
  pages: {
    "/login": {
      "*": "fade"
    },
    "*": {
      "/login": "fade",
      "*": "slideLeft"
    }
  }
};

export const App = () => (
  <Provider config={config}>
    <Router />
  </Provider>
);
```

## Voir aussi
- [Hooks](/front/hooks) - Documentation des hooks
- [Animations](/front/animations) - Animations de pages
- [Astuces](/front/astuces) - Bonnes pratiques