Liferay.component()
registers a component and retrieves its instance from the global registry.
Liferay.component(id, value, [componentConfig]);
To register a component you need to pass an id
to identify the instance, the component, and as an optional parameter, a custom component configuration to provide additional hints for the system handling of the component lifecycle.
This will return the passed value.
When the component is registered a global Liferay event id + :registered
is fired, which you can listen to with Liferay.on()
or Liferay.once()
.
⚠️ WARNING: If there's already a component registered with the passedid
it will be replaced with the new value, which could lead to unexpected behaviour in theLiferay.component
andLiferay.componentReady
APIs, as well as in the*:registered
events.
Liferay.component(id);
A previously registered component can be retrieved by passing the same id
.
One thing to take into account is that if the registered value was a function, the first time the component is retrieved the function will be executed and its result stored as the new registered value, which will be returned.
Using the <react:component>
tag a component will be registered using Liferay.Component
but it will not be the React component but a synthetic one. That's why even when a function component is being registered (which doesn't create an instance) a component instance is returned.
Liferay.componentReady()
retrieves a list of component instances after they've been registered and returns a Promise
to be resolved with all the requested component instances after they've been successfully registered.
Liferay.componentReady([...id]).then(function)
A common use case is the need of run some actions after a component which is not in scope is created.
We offer some out-of-the-box lifecycles so you don't need to worry about registering / destroying components all the time.
We automatically register a component in some scenarios:
- Using
<liferay-frontend:component>
tag. The component will be registered with the providedcomponentId
. - Using
<react:component>
tag. The component will be registered with the providedcomponentId
. - Rendering a React component with
render
fromfrontend-js-react-web
. The component will be registered with the providedcomponentId
.
This gives us the ability to take care of the destroy process as well.
As we said before we provide a mechanism to destroy the registered components: Liferay.destroyComponent
and Liferay.destroyComponents
, which you could benefit from out-of-the-box just by using what we specified in the Registering point or by properly configuring the component when registering it.
We automatically destroy a component in some scenarios:
-
When a portlet is destroyed, all the components registered with a
portletId
passed in their configuration that matches the destroyed portlet id are destroyed as well. -
On SPA navigation all the components registered with the option
destroyOnNavigate
set totrue
are destroyed. So if you want the system to take care of the destruction of a component when you manually register it you just need to pass the right option:Liferay.component('componentId', component, {destroyOnNavigate: true});