BrandConfig Core

A TypeScript library for managing brand configurations, themes, and multi-language content in React applications.

Installation

npm install brandconfig-core

Features

• 🎨 Dynamic Brand Theming - Switch between brand themes at runtime
• 🌍 Multi-language Support - Load brand data for different languages
• ⚛️ React Integration - Ready-to-use hooks and components
• 📦 TypeScript Support - Full type safety with TypeScript
• 🚀 Lightweight - Minimal dependencies

Quick Start

1. Wrap your app with BrandProvider

import { BrandProvider } from 'brandconfig-core';

function App() {
  return (
    <BrandProvider apiBase="/api" assetsBase="/assets">
      <YourApp />
    </BrandProvider>
  );
}

2. Use brand switching

import { BrandSwitcher, useBrandContext } from 'brandconfig-core';

function Header() {
  const { currentBrand } = useBrandContext();
  
  return (
    <header>
      <h1>Current Brand: {currentBrand}</h1>
      <BrandSwitcher />
    </header>
  );
}

3. Display brand icons

import { BrandIcon } from 'brandconfig-core';

function Logo() {
  return (
    <BrandIcon 
      brandCode="opel" 
      type="public" 
      className="logo"
    />
  );
}

API Reference

Hooks

useBrands(apiBase?: string)

Fetches and manages brand configuration data.

useBrandTheme(initialBrand?: string, assetsBase?: string)

Manages dynamic brand theme switching.

useApiConfig(apiBase?: string)

Fetches API configuration.

useBrandsByLanguage(language: SupportedLanguage, apiBase?: string)

Fetches language-specific brand data.

Components

<BrandProvider>

Context provider for brand configuration.

<BrandSwitcher>

Dropdown component for switching between brands.

<BrandIcon>

Component for displaying brand icons.

Utilities

fetchBrands(apiBase?: string)

Fetches brand configuration from API.

loadBrandTheme(brandCode: string, assetsBase?: string)

Dynamically loads CSS theme for a brand.

getBrandByCode(brands: Brand[], code: string)

Gets a brand by its code.

Development

# Install dependencies
npm install

# Build the library
npm run build

# Watch mode for development
npm run dev

# Clean build artifacts
npm run clean

License

MIT