Examples

Use subscribing events

The following React example subscribes to the EntitySaved event. When the event occurs, the Content Hub code dispatches this event globally and displays entity property information, the data passed on the config, and styling with a color from the material UI theme.

Tip

You can see a walkthrough of this example in the Sitecore Content Hub - External Components video available on the Discover Sitecore channel.

import ReactDOM from "react-dom";
import React from "react";

const OptionsContext = React.createContext<any>(null);

const onEntitySaved = (evt: Event): void => {
    const { definitionName, id } = (evt as CustomEvent<{ definitionName: string; id: number }>).detail;

    alert(`Entity with id ${id} and definition ${definitionName} was saved`);
};

window.addEventListener("ENTITY_SAVED", onEntitySaved);

export default function createExternalRoot(container: HTMLElement) {
    return {
        render(context: any) {
            ReactDOM.render(
                <OptionsContext.Provider value={context.options}>
                    <OptionsContext.Consumer>
                        {options => {
                            return (
                                <>
                                    {/* We use a color from the theme and the entity id from the options */}
                                    <h2 style={{ color: context.theme.palette.primary.main }}>
                                        the entity id is, {options.entityId}!
                                    </h2>
                                    {/* We show a property from the config object */}
                                    <p>
                                        The following is information from the config object:
                                        {context.config.propFromConfig}
                                    </p>
                                    <p style={{ color: "var(--color-cyan, 'red')" }}>
                                        The following text is styled in the cyan color based on the --color-cyan CSS
                                        variable with red as a fallback
                                    </p>
                                </>
                            );
                        }}
                    </OptionsContext.Consumer>
                </OptionsContext.Provider>,
                container
            );
        },
        unmount() {
            window.removeEventListener("ENTITY_SAVED", onEntitySaved);
            ReactDOM.unmountComponentAtNode(container);
        },
    };
}

In this example, the return statement generates three HTML elements. The first is a heading stating a specific value, styled according to the theme.

<h2 style={{ color: context.theme.palette.primary.main }}>
    the entity id is, {options.entityId}!
</h2>

The second element is a paragraph describing a valued passed by the JSON config object.

<p>
    The following is information from the config object:
    {context.config.propFromConfig}
</p>

The third element is a paragraph containing plain text, styled using a CSS variable.

<p style={{ color: "var(--color-cyan, 'red')" }}>
    The following text is styled in the cyan color based on the --color-cyan CSS
    variable
</p>

If you have suggestions for improving this article, let us know!