@c15t/react
Version:
Developer-first CMP for React: cookie banner, consent manager, preferences centre. GDPR ready with minimal setup and rich customization
82 lines • 2.51 kB
TypeScript
/**
* @packageDocumentation
* Provides the root component for the consent management interface.
* Implements context provider pattern with theme support and state management.
*/
import type { FC, ReactNode } from 'react';
import { type ThemeContextValue } from '../../../context/theme-context';
import type { ConsentManagerWidgetTheme } from '../theme';
/**
* Props for the ConsentManagerWidgetRoot component.
*
* @remarks
* Extends ThemeContextValue to provide comprehensive theming support
* while maintaining type safety for consent management specific features.
*
* @public
*/
export interface ConsentManagerWidgetRootProps extends ThemeContextValue<ConsentManagerWidgetTheme> {
/**
* Child components to be rendered within the consent manager context.
*
* @remarks
* - Should include ConsentManagerWidget.Content and related components
* - Receives context and theming from the root provider
*/
children: ReactNode;
/**
* Determines whether to use the context provider.
* If false, the component will not wrap children in a context provider.
*
* @defaultValue true
*/
useProvider?: boolean;
/**
* @remarks
* When true, removes all default styling from the banner and its children.
* Useful when implementing completely custom styles.
*/
noStyle?: boolean;
}
/**
* Root component of the ConsentManagerWidget that provides context and styling.
*
* @remarks
* Key features:
* - Provides the ConsentManagerWidget context to all child components
* - Manages consent state through the consent manager
* - Handles theme distribution to child components
* - Supports animation toggling
* - Allows complete style customization
*
* @example
* Basic usage:
* ```tsx
* <ConsentManagerWidget.Root>
* <ConsentManagerWidget.Content>
* {Banner content}
* </ConsentManagerWidget.Content>
* </ConsentManagerWidget.Root>
* ```
*
* @example
* With custom styling:
* ```tsx
* <ConsentManagerWidget.Root
* styles={{
* root: "fixed bottom-0 w-full bg-white",
* content: "max-w-4xl mx-auto p-4",
* title: "text-xl font-bold",
* description: "mt-2 text-gray-600"
* }}
* >
* {Banner content}
* </ConsentManagerWidget.Root>
* ```
*
* @public
*/
declare const ConsentManagerWidgetRoot: FC<ConsentManagerWidgetRootProps>;
declare const Root: FC<ConsentManagerWidgetRootProps>;
export { Root, ConsentManagerWidgetRoot };
//# sourceMappingURL=root.d.ts.map