Render
Implementing a new render in your dropin
To implement a new render in your dropin, you must create an instance of the Render
class from the @adobe-commerce/elsie/lib
library, passing in a Provider
component.
This setup initializes the rendering context with the specified provider, which can manage state, context, or other dependencies required by your components.
By exporting this render
instance, you enable different parts of your application to render components within the defined context, ensuring consistent behavior and integration across your application.
// Dropin
import { Render } from '@adobe-commerce/elsie/lib';import { Provider } from './Provider';
export const render = new Render(<Provider />);
Rendering a dropin’s container in a storefront
The render function mounts a drop-in container or component into the DOM and manages its lifecycle. It returns a Promise that resolves to an object containing methods for updating and removing the component instance.
// Storefrontimport { render as provider } from 'my-domain-pkg/render.js';import { MyContainer } from 'my-domain-pkg/containers/MyContainer.js';
const wrapper = document.getElementById('my-container-root');
provider.render(MyContainer, { ...props })(wrapper);
Using VNode as a property
Some components may require VNodes as properties. If you are using another component from the library, provide the VNode by executing the component as a function.
// Storefront
import { Button, Icon, provider } from '@dropins/tools/components.js';
const wrapper = document.getElementById('my-container-root');
provider.render(Button, { children: 'My Button', icon: Icon({ source: 'Heart' }),})(wrapper);
You may also create your VNode using the h
function from the Preact library.
// Storefront
import { Button, provider } from '@dropins/tools/components.js';import { h } from '@dropins/tools/preact.js';
const wrapper = document.getElementById('my-container-root');
provider.render(Button, { icon: h('div', { id: 'my-vnode' }) })(wrapper);
Update properties of a rendered component
The setProps
method is provided by the instance returned from the render
function. It allows for dynamic updates to the properties of a rendered component. By accepting an updater function, setProps
lets you modify the component’s props based on its previous state. This method is particularly useful for making incremental changes or responding to user interactions without re-rendering the entire component. It ensures that the component’s state remains consistent and up-to-date with the latest data or user inputs.
Example
// Storefront
import { render as provider } from 'my-domain-pkg/render.js';import { MyContainer } from 'my-domain-pkg/containers/MyContainer.js';
const wrapper = document.getElementById('my-container-root');const myContainer = await provider.render(MyContainer, { ...props })(wrapper);
const button = document.getElementById('my-button');
button.addEventListener('click', () => { // Update the component's props myContainer.setProps((prevProps) => ({ ...prevProps, newProp: 'new value', }));});
Remove a rendered component from the DOM
The remove
method is provided by the instance returned from the render
function. It allows for the complete removal of a rendered component from the DOM. When invoked, remove
ensures that the component and its associated resources are properly cleaned up, preventing memory leaks and maintaining the application’s overall performance. This method is essential for managing the lifecycle of dynamic components, especially in applications where components need to be frequently added and removed based on user interactions or other events.
import { render as provider } from 'my-domain-pkg/render.js';import { MyContainer } from 'my-domain-pkg/containers/MyContainer.js';
const wrapper = document.getElementById('my-container-root');const myContainer = await provider.render(MyContainer, { ...props })(wrapper);
const button = document.getElementById('my-button');
button.addEventListener('click', () => { // Remove the component from the DOM myContainer.remove();});