I built layout-manager-react for React apps that need flexible, real-time, and resizable layouts — perfect for dashboards, trading platforms, and IDEs.
✨ Key Features
- Flexbox-based layout system for responsive panels
- Drag & drop with 4 drop zones (center, left, right, top/bottom)
- Resizable tabsets with splitters
- RTL/LTR direction support
- Persistent state with localStorage and debouncing
- Tab closing, restoration, and reordering
- Custom close icons for tabs
- Component restoration system
- Tab selection and direction switching
- Storage management (clear or reset layout)
- Min/max width/height constraints
- Highly customizable to fit your app’s needs
`import { Layout, createLayoutModel, createTab, createTabSet } from 'layout-manager-react';
import 'layout-manager-react/dist/style.css';
const model = createLayoutModel(
createTabSet('tabs', [
createTab('tab1', 'dashboard', 'Dashboard'),
createTab('tab2', 'analytics', 'Analytics'),
])
);
;`
🔗 Links
GitHub: github.com/hrashkan/layout-manager-react
npm: npm install layout-manager-react
Why You’ll Love It:
- Lightweight and fully TypeScript-ready
- Smooth drag, drop, and resize experience
- Highly customizable for any React layout
- Built with performance and flexibility in min
💬 I’d love to hear from other React developers — what features would you add or improve?