https://github.com/mgerasika/react-layout-manager

Drag & Drop and resize layouts
https://github.com/mgerasika/react-layout-manager

Last synced: about 2 months ago
JSON representation

Drag & Drop and resize layouts

• Host: GitHub
• URL: https://github.com/mgerasika/react-layout-manager
• Owner: mgerasika
• Created: 2023-03-24T15:50:11.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2023-08-01T13:07:44.000Z (over 1 year ago)
• Last Synced: 2024-06-14T16:53:09.382Z (7 months ago)
• Language: TypeScript
• Homepage: https://react-layout-manager.web.app/
• Size: 15.5 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

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

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

![image](https://user-images.githubusercontent.com/10614750/230366968-b826feb3-35f5-41c5-a461-c651eb74866c.png)

## 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,

});

     (

        


          

        

      )}

    />

  

```


### 3. Result

![image](https://user-images.githubusercontent.com/10614750/230370032-26a1a2d7-5c4b-4461-a8cb-928afae41e99.png)