Implementation of services and UI components for the React version of the SDK, that are agnostic about how the actual data is loaded.

Define layout components

• Implement a React component that accepts the ReactComponentProps as input
• Register this component using the ComponentRegistry service

How to access the ComponentRegistry service?

• Create a React component and use the provider of theACOUSTIC_CONTEXT_COMPONENT_REGISTRY context.

Example:

export const LayoutsModule: FC = ({ children }) => (
  <ACOUSTIC_CONTEXT_COMPONENT_REGISTRY.Consumer>
    {(aReg) => {
      // do something sensible with the service

      // include the children
      return <>{children}</>;
    }}
  </ACOUSTIC_CONTEXT_COMPONENT_REGISTRY.Consumer>
);

API Documentation

Home > @acoustic-content-sdk/react-components

react-components package

Interfaces

| Interface | Description | | --- | --- | | LayoutRegistrationProps | |

Variables

| Variable | Description | | --- | --- | | ACOUSTIC_PROVIDER_BROWSER_WINDOW | Provides the ACOUSTIC_CONTEXT_WINDOW token for browser based applications. | | ACOUSTIC_PROVIDER_COMPONENT_REGISTRY | Declares the provider | | ACOUSTIC_PROVIDER_COMPONENT_RESOLVER | Declares the provider | | ACOUSTIC_PROVIDER_CONTENT_COMPONENT | Provides the rendering context component | | ACOUSTIC_PROVIDER_DELIVERY_SEARCH_RESOLVER | Declares the provider | | ACOUSTIC_PROVIDER_EDIT_HOST_WINDOW | Declares the provider | | ACOUSTIC_PROVIDER_LOGGER_SERVICE | Declares the provider | | ACOUSTIC_PROVIDER_PAGE_COMPONENT | Provides the rendering context component | | ACOUSTIC_PROVIDER_PAGE_SERVICE | Declares the provider | | ACOUSTIC_PROVIDER_PROTECTED_CONTENT | Declares the provider | | ACOUSTIC_PROVIDER_RENDERING_CONTEXT_RESOLVER | Declares the provider | | ACOUSTIC_PROVIDERS_COMPONENTS | Exports the providers of this module | | LayoutComponent | The layout component directive | | LayoutMapping | The layout mapping directive | | LayoutRegistration | Component that registers layouts | | VERSION | Version and build number of the package | | WchContentComponent | Implementation of the component that performs the actual rendering of content | | WchPageComponent | Implementation of the top level component that resolves the page |

Type Aliases

| Type Alias | Description | | --- | --- | | LayoutComponentDirective | Type for a directive |

Home > @acoustic-content-sdk/react-components > LayoutRegistrationProps

LayoutRegistrationProps interface

Signature:

export interface LayoutRegistrationProps 

Properties

| Property | Type | Description | | --- | --- | --- | | register | Consumer<ComponentRegistry> | |

Home > @acoustic-content-sdk/react-components > ACOUSTIC_PROVIDER_BROWSER_WINDOW

ACOUSTIC_PROVIDER_BROWSER_WINDOW variable

Provides the ACOUSTIC_CONTEXT_WINDOW token for browser based applications.

Signature:

ACOUSTIC_PROVIDER_BROWSER_WINDOW: import("@acoustic-content-sdk/react-api").ReactProvider<WindowType>

Home > @acoustic-content-sdk/react-components > ACOUSTIC_PROVIDER_COMPONENT_REGISTRY

ACOUSTIC_PROVIDER_COMPONENT_REGISTRY variable

Declares the provider

Signature:

ACOUSTIC_PROVIDER_COMPONENT_REGISTRY: import("@acoustic-content-sdk/react-api").ReactProvider<import("@acoustic-content-sdk/react-api").ComponentRegistry>

Home > @acoustic-content-sdk/react-components > ACOUSTIC_PROVIDER_COMPONENT_RESOLVER

ACOUSTIC_PROVIDER_COMPONENT_RESOLVER variable

Declares the provider

Signature:

ACOUSTIC_PROVIDER_COMPONENT_RESOLVER: import("@acoustic-content-sdk/react-api").ReactProvider<import("@acoustic-content-sdk/react-api").ComponentResolver>

Home > @acoustic-content-sdk/react-components > ACOUSTIC_PROVIDER_CONTENT_COMPONENT

ACOUSTIC_PROVIDER_CONTENT_COMPONENT variable

Provides the rendering context component

Signature:

ACOUSTIC_PROVIDER_CONTENT_COMPONENT: import("@acoustic-content-sdk/react-api").ReactProvider<import("@acoustic-content-sdk/react-api").ReactComponent<ContentComponentProps, any>>

Home > @acoustic-content-sdk/react-components > ACOUSTIC_PROVIDER_DELIVERY_SEARCH_RESOLVER

ACOUSTIC_PROVIDER_DELIVERY_SEARCH_RESOLVER variable

Declares the provider

Signature:

ACOUSTIC_PROVIDER_DELIVERY_SEARCH_RESOLVER: import("@acoustic-content-sdk/react-api").ReactProvider<import("@acoustic-content-sdk/component-api").DeliverySearchResolver>

Home > @acoustic-content-sdk/react-components > ACOUSTIC_PROVIDER_EDIT_HOST_WINDOW

ACOUSTIC_PROVIDER_EDIT_HOST_WINDOW variable

Declares the provider

Signature:

ACOUSTIC_PROVIDER_EDIT_HOST_WINDOW: import("@acoustic-content-sdk/react-api").ReactProvider<WindowType>

Home > @acoustic-content-sdk/react-components > ACOUSTIC_PROVIDER_LOGGER_SERVICE

ACOUSTIC_PROVIDER_LOGGER_SERVICE variable

Declares the provider

Signature:

ACOUSTIC_PROVIDER_LOGGER_SERVICE: import("@acoustic-content-sdk/react-api").ReactProvider<import("@acoustic-content-sdk/api").LoggerService>

Home > @acoustic-content-sdk/react-components > ACOUSTIC_PROVIDER_PAGE_COMPONENT

ACOUSTIC_PROVIDER_PAGE_COMPONENT variable

Provides the rendering context component

Signature:

ACOUSTIC_PROVIDER_PAGE_COMPONENT: import("@acoustic-content-sdk/react-api").ReactProvider<import("@acoustic-content-sdk/react-api").ReactComponent<RouteComponentProps<{}, import("react-router").StaticContext, {}>, any>>

Home > @acoustic-content-sdk/react-components > ACOUSTIC_PROVIDER_PAGE_SERVICE

ACOUSTIC_PROVIDER_PAGE_SERVICE variable

Declares the provider

Signature:

ACOUSTIC_PROVIDER_PAGE_SERVICE: import("@acoustic-content-sdk/react-api").ReactProvider<import("@acoustic-content-sdk/react-api").ReactWchPageService>

Home > @acoustic-content-sdk/react-components > ACOUSTIC_PROVIDER_PROTECTED_CONTENT

ACOUSTIC_PROVIDER_PROTECTED_CONTENT variable

Declares the provider

Signature:

ACOUSTIC_PROVIDER_PROTECTED_CONTENT: import("@acoustic-content-sdk/react-api").ReactProvider<import("@acoustic-content-sdk/component-api").ProtectedContent>

Home > @acoustic-content-sdk/react-components > ACOUSTIC_PROVIDER_RENDERING_CONTEXT_RESOLVER

ACOUSTIC_PROVIDER_RENDERING_CONTEXT_RESOLVER variable

Declares the provider

Signature:

ACOUSTIC_PROVIDER_RENDERING_CONTEXT_RESOLVER: import("@acoustic-content-sdk/react-api").ReactProvider<import("@acoustic-content-sdk/component-api").RenderingContextResolver>

Home > @acoustic-content-sdk/react-components > ACOUSTIC_PROVIDERS_COMPONENTS

ACOUSTIC_PROVIDERS_COMPONENTS variable

Exports the providers of this module

Signature:

ACOUSTIC_PROVIDERS_COMPONENTS: Array<ReactProvider<any>>

Home > @acoustic-content-sdk/react-components > LayoutComponent

LayoutComponent variable

The layout component directive

Signature:

LayoutComponent: <T extends import("@acoustic-content-sdk/react-api").ReactComponent<import("@acoustic-content-sdk/react-api").ReactComponentProps, any>>(aDirective?: import("@acoustic-content-sdk/component-api").AbstractLayoutComponentDirective) => (cls: T) => void

Home > @acoustic-content-sdk/react-components > LayoutMapping

LayoutMapping variable

The layout mapping directive

Signature:

LayoutMapping: <T extends import("@acoustic-content-sdk/react-api").ReactComponent<import("@acoustic-content-sdk/react-api").ReactComponentProps, any>>(aID: string | string[] | import("@acoustic-content-sdk/component-api/dist/decorators/layout/layout.directive").LayoutMappingDirective, aSelector?: string | import("react").FunctionComponent<import("@acoustic-content-sdk/react-api").ReactComponentProps> | import("react").ComponentClass<import("@acoustic-content-sdk/react-api").ReactComponentProps, any> | string[], aLayoutMode?: string | string[]) => (cls: T) => void

Home > @acoustic-content-sdk/react-components > LayoutRegistration

LayoutRegistration variable

Component that registers layouts

Signature:

LayoutRegistration: FC<LayoutRegistrationProps>

Home > @acoustic-content-sdk/react-components > VERSION

VERSION variable

Version and build number of the package

Signature:

VERSION: {
    version: {
        major: string;
        minor: string;
        patch: string;
        branch: string;
    };
    build: Date;
}

Home > @acoustic-content-sdk/react-components > WchContentComponent

WchContentComponent variable

Implementation of the component that performs the actual rendering of content

Signature:

WchContentComponent: FC<ContentComponentProps>

Home > @acoustic-content-sdk/react-components > WchPageComponent

WchPageComponent variable

Implementation of the top level component that resolves the page

Signature:

WchPageComponent: FC<RouteComponentProps>

Home > @acoustic-content-sdk/react-components > LayoutComponentDirective

LayoutComponentDirective type

Type for a directive

Signature:

export declare type LayoutComponentDirective = AbstractLayoutComponentDirective;

Home > @acoustic-content-sdk/react-components > LayoutRegistrationProps > register

LayoutRegistrationProps.register property

Signature:

register: Consumer<ComponentRegistry>;