@annotationhub/react-golden-layout v2.3.2
React Golden Layout
Original project credit goes to: https://github.com/golden-layout/golden-layout.
Overview
This project was forked from the original golden layout project, which unfortunately appears to have been abandoned. This is a forked & updated version of that original project to add compatability with React. This updated version now exports a GoldenLayoutComponent
for easy integration into a React project.
Example usage:
import React, { useState } from 'react';
import '@annotationhub/react-golden-layout/dist/css/goldenlayout-base.css';
import '@annotationhub/react-golden-layout/dist/css/themes/goldenlayout-dark-theme.css';
import { ReactGoldenLayout } from '@annotationhub/react-golden-layout';
export default function GoldenTest() {
const [layoutManager, setLayoutManager] = useState(null);
return (
<div style= {{ width: '100vw', height: '100vh' }}>
<ReactGoldenLayout
// (Optional) Defaults to true. Set up auto-resizing. Layout will resize when the window resizes.
autoresize={true}
// (Optional) (Milliseconds) Defaults to 50. Debounce resize to prevent excessive re-renders.
debounceResize={100}
// (Optional) Grab the instance of the GoldenLayout Manager. Gives you full access to GL API.
onLayout={setLayoutManager}
// (Optional) See http://golden-layout.com/docs/Config.html for all settings.
settings: { hasHeaders: true }
// (Optional) See http://golden-layout.com/docs/Config.html for all dimensions.
dimensions: { borderWidth: 2 }
// (Optional) See http://golden-layout.com/docs/Config.html for all label options.
labels: { close: 'close' }
>
<Row
// (Optional) Grab the corresponding Golden Layout RowOrColumn instance.
onLayoutItem={item => {}}
// Any other General config property documented at http://golden-layout.com/docs/ItemConfig.html is valid.
>
<Content title='Panel 1', width={20}>
<h1>Panel 1</h1>
</Content>
<Column width={80}>
<Stack height={35}>
{/* Be sure to your custom components in a <Content> component. */}
<Content title='Panel 2'>
<h1>Stack Panel 2</h1>
</Content>
<Content title='Panel 3'>
<h1>Stack Panel 2</h1>
</Content>
</Stack>
<Content height={65} title='Panel 4'>
<h1>Panel 4</h1>
</Content>
</Column>
</Row>
</ReactGoldenLayout>
</div>
);
}
Features
- Full touch support
- Native popup windows
- Completely themeable
- Comprehensive API
- Powerful persistence
- Works in IE8+, Firefox, Chrome
- Reponsive design
Installation / Usage
To install, run: npm i -S @annotationhub/react-golden-layout
.
If you are using webpack or another module bundler, you may wish to install it as dev-dep instead. We are shipping an UMD version, an ES5 + ES-Module version and an ES2015+ES-Module version of the library within the package. Modern bundlers such as webpack should pick up the ES2015 version and transpile the code according to your applications configuration.
Demo App
We have a demo application embedded within this repository, to run it, run:
git clone github.com/golden-layout/golden-layout
cd golden-layout
npm ci # (or npm i, if you use an old npm version)
npm run start-jquery
# the app is served at localhost:3000 and uses hot-reload, so you can hack right away within the library and the application.
Development
Internally, we are using webpack and babel to have a build process.
To get started, follow the steps described in demo-app.
You can get a complete build by running npm run build
, which will compile all versions of the app into the dist
folder.
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago