Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
src
.eslintignore
.eslintrc.js
.gitignore
.travis.yml
README.md
babel.config.js
index.d.ts
jest.config.js
jest.setup.js
package-lock.json
package.json
prettier.config.js

README.md

Welcome to react-dynamic-layout 👋

Documentation Maintenance License: MIT Twitter: _albizures

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

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

You can’t perform that action at this time.