Create a new column

React properties for the ContentItem component.

Type: {type: string, children: ChildrenArray<any>, itemRef: function (GoldenLayoutItem): any?}

Create a new GoldenLayout ContentItem.

Note: You probably don't want to use this class directly, see:

• Row
• Column
• Stack

Extends React.Component

Convert a React Component's constructor to a GoldenLayout React Component.

React properties for the GoldenLayoutComponent component.

Type: {children: ChildrenArray<any>, className: string?, goldenLayoutRef: function (GoldenLayout): any?}

Create a GoldenLayout instance

Extends React.PureComponent

import 'golden-layout/src/css/goldenlayout-base.css';
import 'golden-layout/src/css/goldenlayout-dark-theme.css';
import GoldenLayout, { Row, Stack, createGoldenLayoutComponent } from 'react-golden-layout';
...
<GoldenLayout>
    <Row>
        <Stack>
            {
              // To apply properties to a React component, use createGoldenLayoutComponent
            }
            {createGoldenLayoutComponent(Foo, { isClosable: false, title: "Foo's Title" })}
        </Stack>
        <Stack>
            {
              // If you don't want any special settings you can just pass
              // React components directly.
            }
            {Bar}
        </Stack>
    </Row>
</GoldenLayout>

Create a new Row

React properties for the Stack component.

Type: {children: ChildrenArray<any>, itemRef: function (GoldenLayoutItem): any?, headerRef: function (GoldenLayoutHeader): any?, headerPosition: (false | "top" | "left" | "right" | "bottom")?, showPopoutIcon: boolean?, showMaximiseIcon: boolean?, showCloseIcon: boolean?}

Create a new Stack

A GoldenLayout Item, see GoldenLayout's documentation.

Type: Object

A GoldenLayout Header object, see GoldenLayout's documentation.

Type: Object

A React component

A React component

A GoldenLayout instance, see GoldenLayout's documentation.