@asgardeo/react
Version:
React implementation of Asgardeo JavaScript SDK.
89 lines (88 loc) • 2.62 kB
TypeScript
/**
* Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
*
* WSO2 LLC. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import { FC, PropsWithChildren } from 'react';
import { BrandingPreference } from '@asgardeo/browser';
/**
* Configuration options for the BrandingProvider
*/
export interface BrandingProviderProps {
/**
* The branding preference data passed from parent (typically AsgardeoProvider)
*/
brandingPreference?: BrandingPreference | null;
/**
* Force a specific theme ('light' or 'dark')
* If not provided, will use the activeTheme from branding preference
*/
forceTheme?: 'light' | 'dark';
/**
* Whether the branding provider is enabled
* @default true
*/
enabled?: boolean;
/**
* Loading state passed from parent
*/
isLoading?: boolean;
/**
* Error state passed from parent
*/
error?: Error | null;
/**
* Function to refetch branding preference passed from parent
*/
refetch?: () => Promise<void>;
}
/**
* BrandingProvider component that manages branding state and provides branding context to child components.
*
* This provider receives branding preferences from a parent component (typically AsgardeoProvider)
* and transforms them into theme objects, making them available to all child components.
*
* Features:
* - Receives branding preferences as props
* - Theme transformation from branding preferences
* - Loading and error states
* - Support for custom theme forcing
*
* @example
* Basic usage (typically used within AsgardeoProvider):
* ```tsx
* <BrandingProvider
* brandingPreference={brandingData}
* isLoading={isFetching}
* error={fetchError}
* >
* <App />
* </BrandingProvider>
* ```
*
* @example
* With custom theme forcing:
* ```tsx
* <BrandingProvider
* brandingPreference={brandingData}
* forceTheme="dark"
* enabled={true}
* >
* <App />
* </BrandingProvider>
* ```
*/
declare const BrandingProvider: FC<PropsWithChildren<BrandingProviderProps>>;
export default BrandingProvider;