Module: @ima/react-page-renderer

Classes

• AbstractComponent
• AbstractPureComponent
• BlankManagedRootView
• ErrorBoundary
• PageRendererFactory
• ServerPageRenderer
• ViewAdapter

Interfaces

• PageContextType
• ViewAdapterProps
• useComponentType
• useDispatcherType
• useEventBusType

Variables

PageContext

• Const PageContext: Context<PageContextType>

Defined in

packages/react-page-renderer/src/PageContext.ts:8

Functions

cssClasses

▸ cssClasses(component, classRules, includeComponentClassName): string

Generate a string of CSS classes from the properties of the passed-in object that resolve to true.

Parameters

Name	Type	Description
component	AbstractComponent<unknown, unknown, unknown> | AbstractPureComponent<unknown, unknown, unknown>	The component requiring the composition of the CSS class names.
classRules	string | string[] | { [key: string]: boolean; }	CSS classes in a string separated by whitespace, or a map of CSS class names to boolean values. The CSS class name will be included in the result only if the value is true.
includeComponentClassName	boolean	-

Returns

string

String of CSS classes that had their property resolved to true.

Example

this.cssClasses('my-class my-class-modifier', true);

Example

this.cssClasses({
           'my-class': true,
           'my-class-modifier': this.props.modifier
       }, true);

Defined in

packages/react-page-renderer/src/componentHelpers.ts:97

---

defaultCssClasses

▸ defaultCssClasses(classRules, component?): string

Generate a string of CSS classes from the properties of the passed-in object that resolve to true.

Parameters

Name	Type	Description
classRules	Argument	CSS classes in a string separated by whitespace, or a map of CSS class names to boolean values. The CSS class name will be included in the result only if the value is true.
component?	string | ComponentType	The component requiring the composition of the CSS class names, if it has the className property set and requires its inclusion this time.

Returns

string

String of CSS classes that had their property resolved to true.

Defined in

packages/react-page-renderer/src/componentHelpers.ts:122

---

fire

▸ fire(component, eventTarget, eventName, data?): EventBus

Creates and sends a new IMA.js DOM custom event from the provided component.

Parameters

Name	Type	Default value	Description
component	AbstractComponent<unknown, unknown, unknown> | AbstractPureComponent<unknown, unknown, unknown>	undefined	The component at which's root element the event will originate.
eventTarget	EventTarget	undefined	-
eventName	string	undefined	The name of the event.
data	unknown	null	Data to send within the event.

Returns

EventBus

Defined in

packages/react-page-renderer/src/componentHelpers.ts:147

---

getUtils

▸ getUtils(props, context): Utils | undefined

Retrieves the view utilities from the component's current context or properties (preferring the context).

Parameters

Name	Type	Description
props	Object	The component's current properties.
props.$Utils?	Utils	-
context	PageContextType	The component's current context.

Returns

Utils | undefined

The retrieved view utilities.

Throws

Error Throw if the view utils cannot be located in the provided properties nor context.

Defined in

packages/react-page-renderer/src/componentHelpers.ts:19

---

link

▸ link(component, name, params): string

Generates an absolute URL using the provided route name (see the

app/config/routes.js file). The provided parameters will replace the placeholders in the route pattern, while the extraneous parameters will be appended to the generated URL's query string.

Parameters

Name	Type	Description
component	AbstractComponent<unknown, unknown, unknown> | AbstractPureComponent<unknown, unknown, unknown>	The component requiring the generating of the URL.
name	string	The route name.
params	Object	Router parameters and extraneous parameters to add to the URL as a query string.

Returns

string

The generated URL.

Defined in

packages/react-page-renderer/src/componentHelpers.ts:68

---

listen

▸ listen(component, eventTarget, eventName, listener): EventBus

Registers the provided event listener for execution whenever an IMA.js DOM custom event of the specified name occurs at the specified event target.

Parameters

Name	Type	Description
component	AbstractComponent<unknown, unknown, unknown> | AbstractPureComponent<unknown, unknown, unknown>	The component requesting the registration of the event listener.
eventTarget	EventTarget	The react component or event target at which the listener should listen for the event.
eventName	string	The name of the event for which to listen.
listener	(event: Event) => void	The listener for event to register.

Returns

EventBus

Defined in

packages/react-page-renderer/src/componentHelpers.ts:168

---

localize

▸ localize(component, key, params): string

Returns the localized phrase identified by the specified key. The placeholders in the localization phrase will be replaced by the provided values.

Parameters

Name	Type	Description
component	AbstractComponent<unknown, unknown, unknown> | AbstractPureComponent<unknown, unknown, unknown>	The component requiring the localization.
key	never	Localization key.
params	Object	Values for replacing the placeholders in the localization phrase.

Returns

string

Localized phrase.

Defined in

packages/react-page-renderer/src/componentHelpers.ts:47

---

unlisten

▸ unlisten(component, eventTarget, eventName, listener): EventBus

Deregisters the provided event listener for an IMA.js DOM custom event of the specified name at the specified event target.

Parameters

Name	Type	Description
component	AbstractComponent<unknown, unknown, unknown> | AbstractPureComponent<unknown, unknown, unknown>	The component that requested the registration of the event listener.
eventTarget	EventTarget	The react component or event target at which the listener should listen for the event.
eventName	string	The name of the event for which to listen.
listener	(event: Event) => void	The listener for event to register.

Returns

EventBus

Defined in

packages/react-page-renderer/src/componentHelpers.ts:188

---

useComponent

▸ useComponent(): useComponentType

Base hook you can use to initialize your component.

Returns object, which gives you access to the same features you would get in your class component:

• Utility methods: cssClasses, localize, link, fire, listen, unlisten.
• Objects: utils (=== ComponentUtils).

Returns

useComponentType

Object containing context data and utility methods.

Example

const { utils, cssClasses } = useComponent();

Defined in

packages/react-page-renderer/src/hooks/component.ts:52

---

useComponentUtils

▸ useComponentUtils(): Utils

Provides direct access to ComponentUtils.

Returns

Utils

Component utils.

Example

const utils = useComponentUtils();

Defined in

packages/react-page-renderer/src/hooks/componentUtils.ts:13

---

useCssClasses

▸ useCssClasses(): typeof defaultCssClasses

Provides direct access to CssClasses.

Returns

typeof defaultCssClasses

CssClasses function.

Example

const cssClasses = useCssClasses();

Defined in

packages/react-page-renderer/src/hooks/cssClasses.ts:14

---

useDispatcher

▸ useDispatcher<E>(event?, listener?): useDispatcherType

Hook to register listeners for dispatcher events. Returns decorated dispatcher fire function. Omitting hook params doesn't register any events to the dispatcher but provides access to the dispatcher's fire method.

Type parameters

Name	Type
E	extends keyof DispatcherEventsMap

Parameters

Name	Type	Description
event?	E	Event name.
listener?	DispatcherListener<DispatcherEventsMap[E]>	Callback to register to dispatcher.

Returns

useDispatcherType

Dispatcher fire method.

Example

const { fire } = useDispatcher(
    'dispatcher-event',
    () => {}
);

// Access $Dispatcher's.fire method without registering listener
const { fire } = useDispatcher();

// Firing custom event
useEffect(() => {
    fire('another-event', { data: {} })
});

Defined in

packages/react-page-renderer/src/hooks/dispatcher.ts:39

▸ useDispatcher(event?, listener?): useDispatcherType

Parameters

Name	Type
event?	string
listener?	DispatcherListener<any>

Returns

useDispatcherType

Defined in

packages/react-page-renderer/src/hooks/dispatcher.ts:43

---

useEventBus

▸ useEventBus(eventTarget?, eventName?, listener?): useEventBusType

Hook to register listeners for dispatcher events. Returns decorated dispatcher fire function. Omitting hook params doesn't register any events to the dispatcher but provides access to the dispatcher's fire method.

Parameters

Name	Type
eventTarget?	null | EventTarget
eventName?	string
listener?	EventBusListener

Returns

useEventBusType

Dispatcher fire method.

Example

const { fire } = useEventBus(
    componentRef.current,
    'event',
 () => {}
);

Defined in

packages/react-page-renderer/src/hooks/eventBus.ts:27

---

useLink

▸ useLink(): Router["link"]

Provides direct access to Router link function.

Returns

Router["link"]

URL to linked path.

Example

const link = useLink();

Defined in

packages/react-page-renderer/src/hooks/link.ts:14

---

useLocalize

▸ useLocalize(): Dictionary["get"]

Provides direct access to Dictionary.get function.

Returns

Dictionary["get"]

Localized string.

Example

const localize = useLocalize();

Defined in

packages/react-page-renderer/src/hooks/localize.ts:14

---

useOnce

▸ useOnce(callback): void

"Constructor" like hook, which makes sure, that provided callback is called only once during component's lifecycle.

Parameters

Name	Type
callback	() => void

Returns

void

Example

useOnce(() => {
    oneTimeAction();
});

Defined in

packages/react-page-renderer/src/hooks/component.ts:28

---

usePageContext

▸ usePageContext(): PageContextType

Provides direct access to IMA Page context.

Returns

PageContextType

App page context.

Example

const pageContext = usePageContext();

Defined in

packages/react-page-renderer/src/hooks/pageContext.ts:14

---

useSettings

▸ useSettings<T>(selector?): T | undefined

IMA $Settings access provider with optional selector.

Type parameters

Name	Type
T	any

Parameters

Name	Type	Description
selector?	string	Optional path selector.

Returns

T | undefined

Settings value or undefined.

Example

const settings = useSettings();
console.log(settings.$Cache.enabled);

// Using settings selector
const { scripts, documentView } = useSettings('$Page.$Render');
const esScripts = useSettings('$Page.$Render.esScripts');

Defined in

packages/react-page-renderer/src/hooks/settings.ts:19

---

useWindowEvent

▸ useWindowEvent<T, K>(eventTarget, event, listener, useCapture?): useWindowEventType

Hook for binding window events using IMA window API.

Type parameters

Name	Type
T	extends WindowEventTargets
K	extends string | number | symbol

Parameters

Name	Type	Description
eventTarget	T	Optional event target, if left blank it defaults to current window (=> can be omitted in most use cases).
event	K	Event name.
listener	(event: WindowEventTargetsMap<T>[K]) => void	-
useCapture?	boolean | EventListenerOptions	Use capture instead of bubbling (default).

Returns

useWindowEventType

window object and utility methods.

Example

// Using window as event target
const { dispatchEvent, createCustomEvent } = useWindowEvent(
  window,
  'custom-event',
  () => windowEventCallback(a, b)
);

// Using custom event target
const { dispatchEvent } = useWindowEvent(
    window.getElementById('page'),
    'click',
    () => windowEventCallback(a, b),
    false,
);

// Dispatching custom event
useEffect(() => {
    dispatchEvent(
        createCustomEvent('custom-event'),
        { data: {} }
    );
});

Defined in

packages/react-page-renderer/src/hooks/windowEvent.ts:50

▸ useWindowEvent<T, E>(eventTarget, event, listener, useCapture?): useWindowEventType

Type parameters

Name	Type
T	extends EventTarget
E	extends Event = Event

Parameters

Name	Type
eventTarget	T
event	string
listener	(event: E) => void
useCapture?	boolean | EventListenerOptions

Returns

useWindowEventType

Defined in

packages/react-page-renderer/src/hooks/windowEvent.ts:59