Module: @ima/react-page-renderer

Classes

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

Type Aliases

Settings

Ƭ Settings: Object

Type declaration

Name	Type
$App	unknown
$Debug	unknown
$Env	unknown
$Host	unknown
$Language	unknown
$LanguagePartPath	unknown
$Page	{ $Render: { batchResolve?: boolean ; documentView?: ComponentType ; managedRootView?: ComponentType ; masterElementId?: string ; viewAdapter?: ComponentType } }
$Page.$Render	{ batchResolve?: boolean ; documentView?: ComponentType ; managedRootView?: ComponentType ; masterElementId?: string ; viewAdapter?: ComponentType }
$Page.$Render.batchResolve?	boolean
$Page.$Render.documentView?	ComponentType
$Page.$Render.managedRootView?	ComponentType
$Page.$Render.masterElementId?	string
$Page.$Render.viewAdapter?	ComponentType
$Path	unknown
$Protocol	unknown
$Root	unknown
$Version	unknown

Defined in

packages/react-page-renderer/src/types.ts:7

---

Utils

Ƭ Utils: Object

Type declaration

Name	Type
$Dictionary	Dictionary
$EventBus	EventBus
$Router	Router
$CssClasses	(classRules: string | object, component: "" | AbstractPureComponent | AbstractComponent) => string

Defined in

packages/react-page-renderer/src/types.ts:29

Variables

PageContext

• PageContext: Context<PageContextInterface>

Defined in

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

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.

Example

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

Example

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

Parameters

Name	Type	Description
component	AbstractPureComponent | AbstractComponent	The component requiring the composition of the CSS class names.
classRules	string | object	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.

Defined in

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

---

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	Value | Mapping	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:125

---

fire

▸ fire(component, eventName, target, data?): default

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

Parameters

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

Returns

default

Defined in

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

---

getUtils

▸ getUtils(props, context): Utils | undefined

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

Throws

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

Parameters

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

Returns

Utils | undefined

The retrieved view utilities.

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	AbstractPureComponent | AbstractComponent	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:69

---

listen

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

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	AbstractPureComponent | AbstractComponent	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

default

Defined in

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

---

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	AbstractPureComponent | AbstractComponent	The component requiring the localization.
key	string	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): default

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	AbstractPureComponent | AbstractComponent	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

default

Defined in

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

---

useComponent

▸ useComponent(): Object

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).

Example

const { utils, cssClasses } = useComponent();

Returns

Object

object containing context data and utility methods.

Name	Type
cssClasses	(arg0: (string | string[] | Object)[]) => string
fire	(arg0: string, arg1: undefined | null | object) => any
link	(arg0: string, arg1: Object) => any
listen	(arg0: any, arg1: string, arg2: (arg0: Event) => any) => any
localize	(arg0: string, arg1: null | object) => any
unlisten	(arg0: any, arg1: string, arg2: (arg0: Event) => any) => any
utils	Object

Defined in

packages/react-page-renderer/src/hooks/component.js:25

---

useComponentUtils

▸ useComponentUtils(): Object

Provides direct access to ComponentUtils.

Example

const utils = useComponentUtils();

Returns

Object

IMA.js ComponentUtils

Defined in

packages/react-page-renderer/src/hooks/componentUtils.js:10

---

useCssClasses

▸ useCssClasses(): (arg0: (string | string[] | Object)[]) => string

Provides direct access to CssClasses.

Example

const cssClasses = useCssClasses();

Returns

fn

classnames

▸ (arg0): string

Parameters

Name	Type
arg0	(string | string[] | Object)[]

Returns

string

Defined in

packages/react-page-renderer/src/hooks/cssClasses.js:12

---

useDispatcher

▸ useDispatcher(event?, callback?): Object

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.

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: {} })
});

Parameters

Name	Type	Default value	Description
event?	string	null	Event name.
callback?	Function	null	Callback to register to dispatcher.

Returns

Object

Dispatcher fire method.

Name	Type
fire	(arg0: string, arg1: Object, arg2: boolean) => any

Defined in

packages/react-page-renderer/src/hooks/dispatcher.js:30

---

useLink

▸ useLink(): (arg0: string, arg1: Object) => string

Provides direct access to Router link function.

Example

const link = useLink();

Returns

fn

Router.link

▸ (arg0, arg1): string

Parameters

Name	Type
arg0	string
arg1	Object

Returns

string

Defined in

packages/react-page-renderer/src/hooks/link.js:12

---

useLocalize

▸ useLocalize(): (arg0: string, arg1: Object) => string

Provides direct access to Dictionary.get function.

Example

const localize = useLocalize();

Returns

fn

Dictionary.get

▸ (arg0, arg1): string

Parameters

Name	Type
arg0	string
arg1	Object

Returns

string

Defined in

packages/react-page-renderer/src/hooks/localize.js:12

---

useOnce

▸ useOnce(callback): void

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

Example

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

Parameters

Name	Type
callback	Function

Returns

void

Defined in

packages/react-page-renderer/src/hooks/once.js:13

---

usePageContext

▸ usePageContext(): any

Provides direct access to IMA Page context.

Example

const pageContext = usePageContext();

Returns

any

IMA.js PageContext

Defined in

packages/react-page-renderer/src/hooks/pageContext.js:13

---

useSSR

▸ useSSR(): Object

Provides two utility values isClient and isServer, which lets you know what kind of rendering is being done.

Example

const { isClient, isServer } = useSSR();

Returns

Object

Name	Type
isClient	boolean
isServer	boolean

Defined in

packages/react-page-renderer/src/hooks/ssr.js:16

---

useSettings

▸ useSettings(selector): object

IMA $Settings access provider with optional selector.

Example

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

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

Parameters

Name	Type	Description
selector	null | string	Optional path selector.

Returns

object

Settings object or specific sub-settings if selector is provided.

Defined in

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

---

useWindowEvent

▸ useWindowEvent(params?): Object

Hook which you can use to quickly bind native window events. It returns object with utility methods, that are usually used together with binding/unbinding window events. If we omit event target while using this hook, it defaults to current window. This results in smaller and cleaner syntax in most use cases. Omitting function parameters provides access to some window utils.

Example

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

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

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

// Omitting function parameters
const {
  window,
  dispatchEvent,
  createCustomEvent
} = useWindowEvent();

Parameters

Name	Type	Description
params	Object
params.callback	undefined | Function	Callback to register to window event.
params.event	undefined | string	Event name.
params.eventTarget	any	Optional event target, if left blank it defaults to current window (=> can be omitted in most use cases).
params.useCapture	undefined | boolean	Use capture instead of bubbling (default).

Returns

Object

window object and utility methods.

Name	Type
createCustomEvent	() => any
dispatchEvent	() => any
window	(arg0: string, arg1: Object, arg2: boolean) => any

Defined in

packages/react-page-renderer/src/hooks/windowEvent.js:54