# Banner API

Public React props and types from the installed 0.2.0 release.

Source: https://docs.peax.co/consent/reference/banner



## Import [#import]

```tsx
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 [#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](/consent/reference/events). Set `showFloatingButton={false}` if your application supplies its own preferences entry point.

## Published type signatures [#published-type-signatures]

The following reference is generated from public exports of the installed package, not the development checkout.

```ts
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 {};

```