I just published react-unite
to npm.
https://github.com/mizchi/react-unite
inspired by unity3d layout system.
Example
yarn add react@16.7.0-alpha.0 react-dom@16.7.0-alpha.0 react-unite
TypeScript example.
import React from "react";
import ReactDOM from "react-dom";
import { LayoutData, Windowed, EditableLayout } from "react-unite";
const initialLayoutData: LayoutData = {
grid: {
columns: ["1fr", "1fr"],
rows: ["40px", "1fr", "1fr"],
areas: [
["header", "header"],
["preview", "inspector"],
["assets", "inspector"]
]
},
windowMap: {
"#scene": { displayName: "Scene", id: "#scene" },
"#project": { displayName: "Project", id: "#project" },
"#hierachy": { displayName: "Hierachy", id: "#hierachy" },
"#inspector": { displayName: "Inspector", id: "#inspector" },
"#services": { displayName: "Services", id: "#services" }
},
containers: [
{
id: "preview",
displayName: "Preview",
selectedId: "#scene",
windowIds: ["#scene"]
},
{
id: "assets",
displayName: "Preview",
selectedId: "#project",
windowIds: ["#project", "#hierachy"]
},
{
id: "inspector",
displayName: "Inspector",
selectedId: "#inspector",
windowIds: ["#inspector", "#services"]
}
]
};
// To fill window, Set css `html, body { margin: 0;}`
const MyLayout = () => {
return (
<Windowed>
{(width, height) => (
<EditableLayout
width={width}
height={height}
layout={initialLayoutData}
renderTab={data => {
return <span>{data.displayName}</span>;
}}
renderWindow={win => {
return (
<div>
{win.id}: {win.displayName}
</div>
);
}}
/>
)}
</Windowed>
);
};
const root = document.querySelector(".root");
ReactDOM.render(<MyLayout />, root);
Top comments (0)