@ferdifighter/react-docking-layout

Flexible, moderne Docking-Layout-Komponente für React – inspiriert von VS Code.

Ideal für komplexe Web-UIs, Admin-Tools, Editoren, IDEs und überall, wo du Panels flexibel anordnen, ein-/ausblenden und verschieben möchtest.

---

🚀 Schnellstart

``bash
npm install @ferdifighter/react-docking-layout
`

Wichtig: Importiere die CSS- und Theme-Dateien in deinem Projekt:
`js
import "@ferdifighter/react-docking-layout/dist/styles.css";
import "@ferdifighter/react-docking-layout/dist/themes/dark.theme.css";
import "@ferdifighter/react-docking-layout/dist/themes/light.theme.css";
`

Minimalbeispiel:
`tsx
import React, { useState } from 'react';
import { DockingLayout, DockingLayoutConfig } from '@ferdifighter/react-docking-layout';

const initialConfig: DockingLayoutConfig = {
columns: [
{
id: 'left',
width: 220,
panels: [
{ id: 'explorer', title: 'Explorer', content:

},
],
},
{
id: 'center',
panels: [
{ id: 'editor', title: 'Editor', content:

Editor-Inhalt

},
],
},
{
id: 'right',
width: 260,
panels: [
{ id: 'outline', title: 'Outline', content:

Outline-Inhalt

},
],
},
],
};

export default function App() {
const [config, setConfig] = useState(initialConfig);
return ;
}
`

---

✨ Features & Beispiele

$3


`tsx
// Statischer JSX-Content
{ id: 'editor', title: 'Editor', content: }

// Dynamisch per Factory
{ id: 'editor', title: 'Editor', content: (panel) => }

// Mit contentRenderer für maximale Flexibilität
config={config}
contentRenderer={panel => typeof panel.content === 'function' ? panel.content(panel) : panel.content}
/>
`

$3


`tsx
const [closedPanels, setClosedPanels] = useState([]);

config={config}
closedPanels={closedPanels}
onPanelClose={id => setClosedPanels(panels => [...panels, id])}
/>
`

$3


`tsx



`

$3

`tsx
config={config}
panelStyles={{
explorer: { panel: { backgroundColor: '#e3f2fd', borderColor: '#2196f3' } },
terminal: { panel: { backgroundColor: '#222', color: '#fff' } },
}}
/>
`

$3

`tsx
const [activePanel, setActivePanel] = useState('editor');

config={config}
panelStyles={{
[activePanel]: { panel: { borderColor: 'red', boxShadow: '0 0 0 2px red' } }
}}
/>
`

$3


`css
/ Per CSS-Klasse /
.docking-panel--id-explorer {
background: #e0f7fa;
border-color: #00bcd4;
}
/ Per data-Attribut /
.docking-panel[data-panel-id="terminal"] {
background: #222;
color: #fff;
}
`

$3

`tsx
config={config}
globalStyles={{
panel: { borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' },
header: { fontSize: '15px', fontWeight: 'bold' },
}}
/>
`

$3

`tsx
config={config}
onLayoutChange={newConfig => console.log('Layout geändert:', newConfig)}
onPanelClose={panelId => alert('Panel geschlossen: ' + panelId)}
/>
`

$3

`css
@media (max-width: 800px) {
.docking-layout {
flex-direction: column;
}
}
`

---

📚 API-Referenz (Auszug)

$3

`ts
interface DockingLayoutConfig {
columns: DockingColumnConfig[];
className?: string;
style?: React.CSSProperties;
theme?: 'light' | 'dark' | 'auto';
}

interface DockingColumnConfig {
id: string;
width?: number | string;
panels: DockingPanelConfig[];
}

interface DockingPanelConfig {
id: string;
title: string;
position?: 'left' | 'right' | 'top' | 'bottom' | 'center';
size?: number | string;
minSize?: number;
maxSize?: number;
resizable?: boolean;
collapsible?: boolean;
collapsed?: boolean;
closable?: boolean;
pinned?: boolean;
content?: React.ReactNode | ((panel: DockingPanelConfig) => React.ReactNode);
className?: string;
style?: React.CSSProperties;
}
`

$3


`ts
interface DockingLayoutProps {
config: DockingLayoutConfig;
onLayoutChange?: (layout: DockingLayoutConfig) => void;
className?: string;
style?: React.CSSProperties;
theme?: 'light' | 'dark' | 'auto';
contentRenderer?: (panel: DockingPanelConfig) => React.ReactNode;
panelStyles?: Record;
globalStyles?: StyleConfig;
enablePanelStyling?: boolean;
}
`

$3

`ts
interface PanelStyleConfig {
panel?: React.CSSProperties;
header?: React.CSSProperties;
content?: React.CSSProperties;
// ...weitere Bereiche (Tabs, ResizeHandle, Overlay, etc.)
className?: { panel?: string; header?: string; ... };
cssVariables?: Record;
}
`

---

🛠️ Entwicklung & Beitrag

`bash
git clone
cd react-docking-layout
npm install
npm run dev
``

Pull Requests & Issues sind willkommen!

---

Fragen, Wünsche, Feedback?
Erstelle ein Issue oder schreib mir direkt!