Provider Configuration

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

Basic Configuration

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

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

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

Full Configuration

Here are all available options:

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.

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 for more details.

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

components

SmartCommon component customization.

themes

Custom theme definitions:

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

variants

Custom variants for components:

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

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

globalState

Redux global state configuration.

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

Accessing Configuration

Use the useLibConfig hook to access the configuration:

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

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

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

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

Complete Example

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