@c15t/react
Version:
Developer-first CMP for React: cookie banner, consent manager, preferences centre. GDPR ready with minimal setup and rich customization
93 lines • 2.72 kB
TypeScript
import { type FC, type HTMLAttributes, type ReactNode } from 'react';
import type { CookieBannerTheme } from '../theme';
/**
* Props for the root component of the CookieBanner.
*
* @remarks
* The root component serves as the top-level container and context provider
* for the cookie banner. It manages the consent state and styling configuration
* for all child components.
*
* @public
*/
interface CookieBannerRootProps extends HTMLAttributes<HTMLDivElement> {
/**
* @remarks
* React elements to be rendered within the cookie banner.
* Typically includes Content, Title, Description, and Actions components.
*/
children: ReactNode;
/**
* @remarks
* When true, removes all default styling from the banner and its children.
* Useful when implementing completely custom styles.
*/
noStyle?: boolean;
/**
* @remarks
* Custom styles to be applied to the banner and its child components.
* These styles are made available through the CookieBanner context.
*/
theme?: Partial<CookieBannerTheme>;
/**
* @remarks
* When true, disables the entrance/exit animations.
* Useful for environments where animations are not desired.
*/
disableAnimation?: boolean;
/**
* @remarks
* When true, the cookie banner will lock the scroll of the page.
* Useful for implementing a cookie banner that locks the scroll of the page.
* @default false
*/
scrollLock?: boolean;
/**
* @remarks
* When true, the cookie banner will trap focus.
* Useful for implementing a cookie banner that traps focus.
* @default true
*/
trapFocus?: boolean;
}
/**
* Root component of the CookieBanner that provides context and styling.
*
* @remarks
* This component:
* - Provides the CookieBanner context to all child components
* - Manages consent state through the consent manager
* - Handles style distribution to child components
* - Serves as the main container for the banner
*
* @example
* Basic usage:
* ```tsx
* <CookieBanner.Root>
* <CookieBanner.Content>
* {Banner content}
* </CookieBanner.Content>
* </CookieBanner.Root>
* ```
*
* @example
* With custom styling:
* ```tsx
* <CookieBanner.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}
* </CookieBanner.Root>
* ```
*
* @public
*/
declare const CookieBannerRoot: FC<CookieBannerRootProps>;
declare const Root: FC<CookieBannerRootProps>;
export { Root, CookieBannerRoot };
//# sourceMappingURL=root.d.ts.map