---
source_hash: "b88dc28e"
title: "Provider Configuration"
weight: 110
---

# Provider Configuration

SmartCommon's `Provider` accepts a configuration object that allows customizing the application behavior.

## Basic Configuration

```javascript
// 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}>
    {/* Your application */}
  </Provider>
);
```

## Provider Props

| Prop | Type | Description |
| --- | --- | --- |
| `config` | object | Application configuration (see below) |
| `children` | ReactNode | Application content |
| `onError` | Function | Global error callback |
| `errorFallback` | any | Fallback content on error |
| `ErrorFallbackComponent` | Component | Fallback component on error |
| `pwaUpdate` | object | PWA update configuration (passed to `usePWAUpdate`) |

### pwaUpdate

Allows configuring PWA update behavior directly on the Provider:

```javascript
<Provider
  config={config}
  pwaUpdate={{
    autoReload: false,
    checkInterval: 60000,
    onUpdateAvailable: () => console.log('Update available'),
    onUpdateActivated: () => console.log('Update activated')
  }}
>
  {/* ... */}
</Provider>
```

## ConfirmProvider

The `ConfirmProvider` is automatically included in the `Provider`. It accepts a `labels` prop to customize button texts:

```javascript
<ConfirmProvider labels={{
  confirm: 'Confirm',
  cancel: 'Cancel',
  ok: 'OK'
}}>
  {/* ... */}
</ConfirmProvider>
```

## Full Configuration

Here are all available options:

```javascript
const config = {
  // Debug mode - enables console logs
  debug: true,

  // Component configuration
  components: {
    // Active theme
    theme: "default",

    // Custom theme definitions
    themes: {
      default: { /* ... */ },
      dark: { /* ... */ }
    },

    // Custom variants for components
    variants: {
      Button: {
        primary: { className: "bg-blue-500 text-white" },
        secondary: { className: "bg-gray-500 text-white" }
      }
    },

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

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

  // Storage configuration
  storage: {
    db: {
      compression: {}
    },
    local: {
      compression: {}
    },
    session: {
      compression: {}
    }
  },

  // Global state configuration
  globalState: {
    reducers: {}
  },

  // API configuration
  api: {
    // Base URL for API
    prefixUrl: "https://api.example.com",

    // Request timeout (ms)
    timeout: 30000,

    // Debug mode for API requests
    debug: true,

    // Custom path mapping
    paths: {
      login: "auth/login",
      logout: "auth/logout"
    },

    // Custom error handling
    errors: {
      401: (error) => console.log("Unauthorized"),
      500: (error) => console.log("Server error")
    }
  },

  // Page animation configuration
  pages: {
    "/": {
      "/dashboard": "slideLeft",
      "/settings": "slideLeft",
      "*": "fade"
    },
    "/dashboard": {
      "/": "slideRight",
      "*": "fade"
    },
    "*": "fade"
  }
};
```

## Detailed Options

### debug

Enables debug logs in the console for all hooks and components.

```javascript
debug: true  // Enable all logs
debug: false // Disable logs (production)
```

### api

HTTP client (ky) configuration.

| Option | Type | Description |
| --- | --- | --- |
| `prefixUrl` | string | Base URL for all requests |
| `timeout` | number | Timeout in milliseconds (default: 30000) |
| `debug` | boolean | Enable API request logs |
| `paths` | object | Custom path mapping |
| `errors` | object | Error handlers by HTTP code |

### pages

Page transition animation configuration. See [Animations](/front/animations) for more details.

| Animation | Description |
| --- | --- |
| `fade` | Crossfade |
| `slideLeft` | Slide left |
| `slideRight` | Slide right |
| `zoom` | Zoom effect |

### components

SmartCommon component customization.

#### themes

Custom theme definitions:

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

#### variants

Custom variants for components:

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

Storage configuration (localStorage, sessionStorage, IndexedDB).

```javascript
storage: {
  db: {
    compression: {
      enabled: true,
      threshold: 1024 // Compress if > 1KB
    }
  },
  local: {
    compression: {
      enabled: false
    }
  }
}
```

### globalState

Redux global state configuration.

```javascript
globalState: {
  reducers: {
    // Custom reducers to add to the store
    myCustomReducer: myReducerFunction
  }
}
```

## Accessing Configuration

Use the `useLibConfig` hook to access the configuration:

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

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

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

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

## Complete Example

```javascript
// 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>
);
```

## See Also
- [Hooks](/front/hooks) - Hook Documentation
- [Animations](/front/animations) - Page Animations
- [Tips and Tricks](/front/astuces) - Best Practices