Skip to main content

Module: @ima/react-page-renderer

Classes

Type Aliases

Settings

Ƭ Settings: Object

Type declaration

NameType
$Appunknown
$Debugunknown
$Envunknown
$Hostunknown
$Languageunknown
$LanguagePartPathunknown
$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
$Pathunknown
$Protocolunknown
$Rootunknown
$Versionunknown

Defined in

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


Utils

Ƭ Utils: Object

Type declaration

NameType
$DictionaryDictionary
$EventBusEventBus
$RouterRouter
$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

NameTypeDescription
componentAbstractPureComponent | AbstractComponentThe component requiring the composition of the CSS class names.
classRulesstring | objectCSS 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.
includeComponentClassNameboolean

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

NameTypeDescription
classRulesValue | MappingCSS 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.
componentstring | 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

NameTypeDefault valueDescription
componentAbstractPureComponent | AbstractComponentundefinedThe component at which's root element the event will originate.
eventNamestringundefinedThe name of the event.
targetEventTargetundefined-
dataunknownnullData 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

NameTypeDescription
propsObjectThe component's current properties.
props.$Utils?Utils-
contextPageContextInterfaceThe component's current context.

Returns

Utils | undefined

The retrieved view utilities.

Defined in

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


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

NameTypeDescription
componentAbstractPureComponent | AbstractComponentThe component requiring the generating of the URL.
namestringThe route name.
paramsObjectRouter 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

NameTypeDescription
componentAbstractPureComponent | AbstractComponentThe component requesting the registration of the event listener.
eventTargetEventTargetThe react component or event target at which the listener should listen for the event.
eventNamestringThe name of the event for which to listen.
listener(event: Event) => voidThe 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

NameTypeDescription
componentAbstractPureComponent | AbstractComponentThe component requiring the localization.
keystringLocalization key.
paramsObjectValues 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

NameTypeDescription
componentAbstractPureComponent | AbstractComponentThe component that requested the registration of the event listener.
eventTargetEventTargetThe react component or event target at which the listener should listen for the event.
eventNamestringThe name of the event for which to listen.
listener(event: Event) => voidThe 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.

NameType
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
utilsObject

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

NameTypeDefault valueDescription
event?stringnullEvent name.
callback?FunctionnullCallback to register to dispatcher.

Returns

Object

Dispatcher fire method.

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

Defined in

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


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
NameType
arg0string
arg1Object
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
NameType
arg0string
arg1Object
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

NameType
callbackFunction

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

NameType
isClientboolean
isServerboolean

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

NameTypeDescription
selectornull | stringOptional 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

NameTypeDescription
paramsObject
params.callbackundefined | FunctionCallback to register to window event.
params.eventundefined | stringEvent name.
params.eventTargetanyOptional event target, if left blank it defaults to current window (=> can be omitted in most use cases).
params.useCaptureundefined | booleanUse capture instead of bubbling (default).

Returns

Object

window object and utility methods.

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

Defined in

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