Welcome to react-dynamic-layout 👋

React Dynamic Layout is a dock layout system inspired by Golden Layout, made with react.js

🏠 Homepage

Features

• Easy way to create layouts
• Multiple levels of hierarchy
• Float windows
• Panel stack
• Multiple themes
• Resizable

Install

npm install --save react-dynamic-layout

Example

import React from 'react';
import ReactDOM from 'react-dom';
 
import { Layout, Container } from 'react-dynamic-layout';
 
import CenterName from '../components/CenterName';
 
const SimpleExample = () => (
  <Layout type={Layout.COLUMN}>
    <Container initialSize="30%">
      <CenterName name="Top" />
    </Container>
    <Container>
      <Layout type={Layout.ROW}>
        <Container>
          <CenterName name="Bottom Left" />
        </Container>
        <Container>
          <CenterName name="Bottom Right" />
        </Container>
      </Layout>
    </Container>
  </Layout>
);
 
ReactDOM.render(<SimpleExample />, document.getElementById('root'));

NOTE: Look into example folder for more advanced usages

Author

👤 Jose Albizures

• Twitter: @_albizures
• Github: @albizures

Wishlist

• Drag and Drop
• Layout serialization
• Open and close tabs

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2019 Jose Albizures.
This project is MIT licensed.

This README was generated with ❤️ by readme-md-generator