@bloomreach/react-sdk/dist/index.d.ts

Bloomreach SPA SDK for React

import { Component, Page, Container, ContainerItem, ManageContentButton, Menu, Configuration, PageModel } from '@bloomreach/spa-sdk';
import React from 'react';

declare type BrMappedComponent = React.ComponentType<BrProps<Component>> | React.ComponentType<BrProps<Container>> | React.ComponentType<BrProps<ContainerItem>>;
declare type BrMapping = Record<keyof any, BrMappedComponent>;
/**
 * The mapped component properties for Bloomreach React SDK components.
 */
interface BrProps<T extends Component = Component> {
    /**
     * The brXM component instance containing component-specific data,
     * configuration, and metadata from the Bloomreach Experience Manager.
     */
    component?: T;
    /**
     * The current page instance from the Bloomreach Page Model API.
     * Contains all page-level data, metadata, and configuration needed
     * for rendering and preview mode integration.
     */
    page: Page;
    /**
     * Component mapping object that defines how brXM component types
     * are mapped to React components. Used for dynamic component resolution
     * during page rendering.
     */
    mapping: BrMapping;
    /**
     * Whether the component is rendered as a client component.
     */
    isClientComponent?: boolean;
}

/**
 * Render props pattern interface for BrComponent component.
 * Allows child functions to receive page, mapping, and component data
 * as function parameters for flexible rendering patterns.
 */
interface BrComponentRenderProps extends BrProps<Component> {
    /**
     * The specific brXM component instance for the current iteration.
     * Contains component-specific data, configuration, and metadata.
     */
    component: Component;
    /**
     * Whether the component is rendered as a client component.
     */
    isClientComponent: boolean;
}
interface BrComponentProps extends BrProps<Component> {
    /**
     * The path to a component.
     * The path is defined as a slash-separated components name chain
     * relative to the current component (e.g. `main/container`).
     * If it is omitted, all the children will be rendered.
     */
    path?: string;
    /**
     * The brXM component instance containing component-specific data,
     * configuration, and metadata from the Bloomreach Experience Manager.
     */
    component: Component;
    /**
     * Child components or render function that receives page, component, and mapping data.
     * Supports both regular React children and render props pattern for accessing component data.
     */
    children?: React.ReactNode | ((props: BrComponentRenderProps) => React.ReactNode);
}
/**
 * The brXM component with prop-based data access.
 */
declare function BrComponent({ path, children, component, page, mapping, }: BrComponentProps): React.ReactElement;

interface BrManageContentButtonProps extends ManageContentButton {
    /**
     * The current page instance from the Bloomreach Page Model API.
     * Contains all page-level data, metadata, and configuration needed
     * for rendering and preview mode integration.
     */
    page: Page;
}
/**
 * The button component that opens for editing a content.
 */
declare function BrManageContentButton(props: BrManageContentButtonProps): React.ReactElement;

interface BrManageMenuButtonProps {
    /**
     * The current page instance from the Bloomreach Page Model API.
     * Contains all page-level data, metadata, and configuration needed
     * for rendering and preview mode integration.
     */
    page: Page;
    /**
     * The related menu model.
     */
    menu: Menu;
}
/**
 * The button component that opens a menu editor.
 */
declare function BrManageMenuButton({ page, menu }: BrManageMenuButtonProps): React.ReactElement;

/**
 * Render props pattern interface for BrPage component.
 * Allows child functions to receive page, mapping, and component data
 * as function parameters for flexible rendering patterns.
 */
interface BrPageRenderProps extends BrProps<Component> {
    /**
     * The root component of the current page.
     * Represents the top-level container component that holds
     * all page content and layout structure.
     */
    component: Component;
    /**
     * Whether the component is rendered as a client component.
     */
    isClientComponent: boolean;
}
interface BrPageProps {
    /**
     * The configuration of the SPA SDK.
     * @see https://www.npmjs.com/package/@bloomreach/spa-sdk#configuration
     */
    configuration: Configuration;
    /**
     * The brXM and React components mapping.
     */
    mapping: BrMapping;
    /**
     * The pre-initialized page instance or prefetched page model.
     * Mostly this property should be used to transfer state from the server-side to the client-side.
     */
    page?: Page | PageModel;
    /**
     * Child components or render function that receives page, component, and mapping data.
     * Supports both regular React children and render props pattern for accessing page data.
     * In NBRMode, also supports simple functions that return React components without requiring parameters.
     */
    children?: React.ReactNode | ((props: BrPageRenderProps) => React.ReactNode) | (() => React.ReactNode);
}
/**
 * Client-side implementation for BrPage that handles lifecycle and syncing.
 * For backwards compatibility
 */
declare function BrPage({ configuration, mapping, page: initialPage, children, }: BrPageProps): React.ReactElement | null;

export { BrComponent, BrManageContentButton, BrManageMenuButton, BrMapping, BrPage, BrProps };