---
title: "Use subscribing events"
slug: "use-subscribing-events"
abstract: "Code example using subscribing events."
---
# 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](https://www.youtube.com/watch?v=nIjaOUrv-Xs) video available on the Discover Sitecore channel.

```ts
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.

```html
<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.

```html
<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.

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

```