Render element as React

renderElementAsReact is an utility provided to render custom content using React with the Client-side Extensions API.

It handles the mount/unmount cycles and rendering/unmounting the provided component for you. Also, it's recommended to use it since optimizations to React rendering content will be applied here in the future.

Signature

1
2
3
4
5
type renderElementAsReact = <T>(
    renderApi: PanelAPI | ModalAPI,
    RenderElement: ComponentType<{ options: unknown } & Omit<T, 'options'>>,
    additionalProps?: Omit<T, 'options'>,
) => void;

Arguments

NameTypeDescription
renderApi*PanelAPI | ModalAPIThe API object received in the onAction method should be provided as the argument. Only works for Panels and Modals.
RenderElement*ComponentTypeA React Component.
additionalPropsobject An optional object with additional props that will be bind to the component once mounted. Be aware of not overwriting the options property, or modalOptions wont work correctly in the component.

* required

Usage notes

1. Rendering a react component as content of a panel

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { PanelExtension, renderElementAsReact } from '@atlassian/clientside-extensions';

import PanelContent from './panel-content';

/**
 * @clientside-extension
 * @extension-point reff.plugins-example-location
 */
export default PanelExtension.factory(() => {
    return {
        label: `React panel`,
        onAction(panelApi: PanelExtension.Api) {
            renderElementAsReact(panelApi, PanelContent);
        },
    };
});

2. Rendering a react component as content of a modal with additional props

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import { ModalExtension, renderElementAsReact } from '@atlassian/clientside-extensions';
import React from 'react';

/**
 * @clientside-extension
 * @extension-point reff.plugins-example-location
 */
export default ModalExtension.factory((api, context) => {
    return {
        label: `Modal with react content`,
        onAction(modalApi: ModalExtension.Api) {
            modalApi.setTitle('An awesome modal with react');

            interface Context {/*...*/}

            type ReactComponentProps = Context & ModalExtension.MountProps;

            const ReactComponent = ({ options, context }: ReactComponentProps) => {
                options.onClose(() => {
                    /*...*/
                });

                options.setActions([
                    /*...*/
                ]);

                return ( /*..Your custom modal content goes here..*/);
            };
            renderElementAsReact<ReactComponentProps>(modalApi, ReactComponent, context as Context);
        },
    };
});