nope/resources/ui/dynamic/dynamicRenderer.tsx

import React from "react";
import { Alert } from "react-bootstrap";
import { COMPONENTS } from './components';
import { IDynamicRenderSettings } from './interfaces/IDynamicRenderSettings';

class DynamicRenderer extends React.Component<IDynamicRenderSettings, {}> {

    /**
     * Function will be called if the Item has been rendered sucessfully.
     */
    componentDidMount() {
        const _this = this;

        if (typeof _this.props.onMount === 'function') {
            _this.props.onMount();
        }
    }

    /**
     * Function, that will be called before the network fails.
     */
    componentWillUnmount() {
        // Call the unmount
        if (typeof this.props.onUnmount === 'function') {
            this.props.onUnmount();
        }
    }

    constructor(props) {
        super(props);
    }

    public render() {
        if (typeof this.props.component === 'string'){
            if (typeof COMPONENTS[this.props.component] !== "undefined") {
                return React.createElement(COMPONENTS[this.props.component],{ ...this.props.props});
              }
            // component doesn't exist yet
            return (<>
                <Alert variant={'danger'}>
                    Componenten with id {this.props.component} not defined in <code>COMPONENTS</code>
                </Alert>
            </>);
        }
        return React.createElement(this.props.component as any,{ ...this.props.props});
    }
}

export default DynamicRenderer;