@acoustic-content-sdk/react-components

Module to attach inline-edit functionality to an WCH based Angular application.

Usage no npm install needed!

<script type="module">
  import acousticContentSdkReactComponents from 'https://cdn.skypack.dev/@acoustic-content-sdk/react-components';
</script>

README

npm

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

How to access the ComponentRegistry service?

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>;