How to use golden-layout - 10 common examples

componentDidMount() {
        if (this.container) {
            // create the layout
            this.composerLayout = new GoldenLayout(this.props.layout, this.container);
            this.composerLayout.registerComponent('testComponent', (container, componentState) => {
                container.getElement().html('<h2>' + componentState.label + '</h2>');
            });
            this.composerLayout.init();
        }
    }

} else {
      $timeout(() => { $scope.loadingScreenClass = 'hide-first-time'; }, 4000);
    }
    const storedLayouts = localStorage.getItem('mt2-layouts');
    if (storedLayouts) {
      this.layouts = JSON.parse(storedLayouts);
      migrateLayouts(this.layouts);
    }

    // temp "fix" for https://github.com/WolframHempel/golden-layout/issues/418
    _.each(this.layouts, layout => this.fixActiveIndexes(layout));
    const currentProfile = localStorage.getItem('mt2-currentProfile');
    if (currentProfile) this.selectedProfile = parseInt(currentProfile, 10);
    else this.selectedProfile = 0;

    const layout = new GoldenLayout(this.getCurrentLayout(), $('#layout-container'));
    this.layout = layout;

    const AngularModuleComponent = (container, state) => {
      const html = windowTemplates[state.templateId];
      const element = container.getElement();

      element.html(html);

      const linkFun = $compile(element);
      const newScope = $scope.$new(true, $scope);
      newScope.container = container;
      if (state.templateId === 'chatTemplate') {
        if (!_.find(this.config.settings.chatPresets, preset => preset.id === state.preset)) {
          if (this.config.settings.chatPresets.length > 0) {
            state.preset = this.config.settings.chatPresets[0].id;
          } else {

createGoldenLayoutInstance(config, container, onModified) {
        dashboardLayout = new GoldenLayout(config, container);
        // TODO identify an event which invokes when a component gets manipulated
        return dashboardLayout;
    }

if (current.isComponent && current.config.id === componentName) {
        current.remove();
        break;
      }

      if (current.contentItems) {
        current.contentItems.forEach(x => items.push(x));
      }
    }
  }

}

//Patching internal GoldenLayout.__lm.utils.ReactComponentHandler:

const ReactComponentHandler = GoldenLayout.__lm.utils.ReactComponentHandler;

class ReactComponentHandlerPatched extends ReactComponentHandler {

  _render() {
    // Instance of GoldenLayoutComponent class
    const reactContainer = this._container.layoutManager.reactContainer;
    if (reactContainer && reactContainer.componentRender) {
      reactContainer.componentRender(this);
    }
  }

  _destroy() {
    this._container.off("open", this._render, this);
    this._container.off("destroy", this._destroy, this);
  }

this._container.off("destroy", this._destroy, this);
  }

  _getReactComponent() {
    // The following method is absolute copy of the original, provided to prevent depenency on window.React
    const defaultProps = {
      glEventHub: this._container.layoutManager.eventHub,
      glContainer: this._container
    };
    const props = $.extend(defaultProps, this._container._config.props);
    return React.createElement(this._reactClass, props);
  }

}

GoldenLayout.__lm.utils.ReactComponentHandler = ReactComponentHandlerPatched;

function loadState(state) {
    if (!state || state.version === undefined) return false;
    switch (state.version) {
        case 1:
            state.filterAsm = {};
            state.version = 2;
        /* falls through */
        case 2:
            state.compilers = [state];
            state.version = 3;
        /* falls through */
        case 3:
            state = convertOldState(state);
            break;  // no fall through
        case 4:
            state = GoldenLayout.unminifyConfig(state);
            break;
        default:
            throw new Error("Invalid version '" + state.version + "'");
    }
    return state;
}

function serialiseState(stateText) {
    var ctx = GoldenLayout.minifyConfig({content: stateText.content});
    ctx.version = 4;
    var uncompressed = risonify(ctx);
    var compressed = risonify({z: lzstring.compressToBase64(uncompressed)});
    var MinimalSavings = 0.20;  // at least this ratio smaller
    if (compressed.length < uncompressed.length * (1.0 - MinimalSavings)) {
        return compressed;
    } else {
        return uncompressed;
    }
}

};

        function wrapComponent(Component, store) {
            class Wrapped extends React.Component {
                render() {
                    return (
                        
                            
                        
                    );
                }
            }
            return Wrapped;
        };

        var layout = new GoldenLayout(config, this.layout);
        layout.registerComponent('IncrementButtonContainer', 
                                 wrapComponent(IncrementButtonContainer, this.context.store)
        );
        layout.registerComponent('DecrementButtonContainer',
                                 wrapComponent(DecrementButtonContainer, this.context.store)
        );
        layout.registerComponent('TestComponentContainer',
                                 wrapComponent(TestComponentContainer, this.context.store)
        );
        layout.init();

        window.addEventListener('resize', () => {
            layout.updateSize();
        });
    }

__gotDiv(div : ?HTMLElement) {
        if (div && !this.state.goldenLayout) {
            const layout = new GoldenLayout({ content: [] }, div);
            layout.init();
            layout.on('initialised', () => {
                if (this.state.goldenLayout === layout) return;

                const goldenLayoutResizer = () => {
                    layout.updateSize();
                };

                window.addEventListener('resize', goldenLayoutResizer);
                this.setState({
                    goldenLayout: layout,
                    goldenLayoutResizer
                });
                if (this.props.goldenLayoutRef)
                    this.props.goldenLayoutRef(layout);
            });

componentDidMount() {
    this.goldenLayoutInstance = new GoldenLayout(
      this.props.config || {},
      this.containerRef.current
    );

    eventService.initialize(this.goldenLayoutInstance.eventHub);

    this.updateDimensions();
    window.addEventListener("resize", this.updateDimensions);
    if (this.props.registerComponents instanceof Function) {
      this.props.registerComponents(this.goldenLayoutInstance);
    }

    this.goldenLayoutInstance.reactContainer = this;
    this.goldenLayoutInstance.init();
    this.goldenLayoutInstance.on("tabCreated", this.props.onTabCreated);
    this.goldenLayoutInstance.on("itemDestroyed", () => this.updateDimensions());