PeaxConsent v0.2.0
Banner API
Public React props and types from the installed 0.2.0 release.
Import
import { Banner } from '@peax/consent-banner-react'
import type { BannerProps, BannerMsg, PreferencesSection, PreferencesSectionId } from '@peax/consent-banner-react'Import the stylesheet separately. Only the package root is a supported JavaScript entry.
Defaults and behavior
| Prop | Default | Behavior |
|---|---|---|
isOpen | false | Parent-controlled visibility |
variant | compact | Compact or stacked layout |
position | right | Left, center or right placement |
slideFrom | bottom | Bottom or matching side entry |
appearanceDelay | 0 | Initial appearance delay in milliseconds |
showCustomizePreferences | true | Show the collapsed preferences trigger |
showFloatingButton | true | Show a floating preferences trigger while the banner is closed |
floatingButtonPosition | Derived from position | Left for a left banner; right otherwise. Set showFloatingButton={true} explicitly when overriding this position |
hasAcceptRejectEqualWeight | false | Use equal secondary styling for decisions |
locale | en | Explicit locale with English fallback |
theme | auto | Host page mode |
preferencesSections | Three built-in IDs | Visible section order |
bannerContent and preferencesContent merge supplied fields with resolved defaults. className and style apply to the .pxc root. cookiePolicyUrl supplies the policy destination. onMsg reports interactions; it does not automatically persist or close the banner.
The floating button requests visibility through navigation messages with source: 'floating-button'. Handle opening and closing by updating isOpen, as described in the event reference. Set showFloatingButton={false} if your application supplies its own preferences entry point.
Published type signatures
The following reference is generated from public exports of the installed package, not the development checkout.
import { BannerMessages } from '@peax/consent-banner-locales';
import { BuiltInPreferencesSectionId } from '@peax/consent-banner-locales';
import { NamedExoticComponent } from 'react';
export declare const Banner: NamedExoticComponent<BannerProps>;
export declare type BannerMsg = PreferencesNavigationMsg | {
type: 'on_accept_all' | 'on_reject_all';
} | {
type: 'on_apply_preferences';
preferences: Record<string, boolean>;
} | {
type: 'on_change_preference';
sectionId: PreferencesSectionId;
checked: boolean;
};
export declare type BannerProps = Placement & FloatingButtonProps & {
isOpen?: boolean;
appearanceDelay?: number;
hasAcceptRejectEqualWeight?: boolean;
showCustomizePreferences?: boolean;
variant?: 'compact' | 'stacked';
locale?: string;
cookiePolicyUrl?: string;
bannerContent?: Partial<BannerMessages>;
preferencesSections?: readonly PreferencesSectionId[];
preferencesContent?: Readonly<Partial<Record<PreferencesSectionId, PreferencesSection>>>;
className?: string;
style?: React.CSSProperties;
theme?: 'light' | 'dark' | 'auto';
onMsg?: (msg: BannerMsg) => void;
};
declare type FloatingButtonPosition = 'left' | 'right';
declare type FloatingButtonProps = {
showFloatingButton?: false;
floatingButtonPosition?: never;
} | {
showFloatingButton: true;
floatingButtonPosition?: FloatingButtonPosition;
};
declare type Placement = {
position?: 'right';
slideFrom?: 'bottom' | 'right';
} | {
position: 'left';
slideFrom?: 'bottom' | 'left';
} | {
position: 'center';
slideFrom?: 'bottom';
};
declare type PreferencesNavigationMsg = {
type: 'on_open_preferences' | 'on_close_preferences';
source: Source;
};
export declare type PreferencesSection = Readonly<{
title?: string;
text?: string;
checked?: boolean;
disabled?: boolean;
}>;
export declare type PreferencesSectionId = BuiltInPreferencesSectionId | (string & Record<never, never>);
declare type Source = 'banner' | 'floating-button';
export {};