React layout manager - is library for splitting your scrreen on draggable & resizable content/

Try online demo (https://react-layout-manager.web.app/)

Usage

1. Create some layout layout object.

export const LAYOUT: ILayout = {
  rows: [
    {
      cells: [
        { viewName: "json" },
        { viewName: "code-editor" },
        { viewName: "console" },
      ],
    },
  ],
};

2. Add useLayout hook && LayoutContext.

const layout = useLayout({
  defaultLayout: LAYOUT,
});

<LayoutContext layout={layout}>
    <Layout
      renderView={({ draggableProps }): JSX.Element => (
        <div className="card-header-icon" {...draggableProps}>
          <Icon name={ICONS.DRAG_HANDLE} color={"white"} size={16} />
        </div>
      )}
    />
  </LayoutContext>

3. Result