@a-multilayout-splitter/core 6.0.0-alpha.1 → 6.0.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +85 -0
- package/package.json +14 -2
package/README.md
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
# A-MultiLayout-Splitter v6
|
|
2
|
+
|
|
3
|
+
**High-performance resizable split layouts for React.** Built for the modern web with a focus on speed, accessibility, and developer experience.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@a-multilayout-splitter/core)
|
|
6
|
+
[](https://github.com/AmanKrr/A-MultiLayout-Splitter/blob/main/LICENSE)
|
|
7
|
+
[](https://amankrr.github.io/A-MultiLayout-Splitter/)
|
|
8
|
+
|
|
9
|
+
## 🚀 Why A-MultiLayout-Splitter?
|
|
10
|
+
|
|
11
|
+
Most React splitters suffer from "jitter" because they trigger a full React render loop 60 times per second during a drag operation. A-MultiLayout-Splitter uses a **hybrid architecture** that bypasses React for resizing interaction while maintaining a perfect React-first state model.
|
|
12
|
+
|
|
13
|
+
### Key Features
|
|
14
|
+
- ⚡️ **60fps Performance**: Direct DOM manipulation during interaction ensures zero-lag dragging.
|
|
15
|
+
- 🌲 **Deep Nesting**: Effortlessly create complex IDE-grade layouts (Sidebars within Topbars within Views).
|
|
16
|
+
- 🧩 **Plugin System**: Modular architecture for features like Keyboard Navigation, Persistence, and Custom UI.
|
|
17
|
+
- 🪝 **First-Class Hooks**: Manage state externally with `useSplitController` for advanced programmatic Control.
|
|
18
|
+
- 💾 **State Persistence**: Built-in support for remembering user layouts across page reloads.
|
|
19
|
+
- 📦 **Zero Dependencies**: Lightweight, tree-shakable, and built with pure modern TypeScript.
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## 📖 Documentation & Demos
|
|
24
|
+
|
|
25
|
+
**[View Full Documentation Site](https://amankrr.github.io/A-MultiLayout-Splitter/)**
|
|
26
|
+
|
|
27
|
+
Our documentation site contains:
|
|
28
|
+
- **Interactive Demos**: Live examples of every feature.
|
|
29
|
+
- **Guide**: Detailed explanation of the React-First architecture.
|
|
30
|
+
- **Deep-Dives**: Learn how to build custom plugins and handle nested layouts.
|
|
31
|
+
- **API Reference**: Comprehensive list of props, hooks, and types.
|
|
32
|
+
|
|
33
|
+
---
|
|
34
|
+
|
|
35
|
+
## 📦 Installation
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
npm install @a-multilayout-splitter/core
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## 🛠️ Basic Quick Start
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
import { Split } from '@a-multilayout-splitter/core';
|
|
45
|
+
|
|
46
|
+
function App() {
|
|
47
|
+
return (
|
|
48
|
+
<div style={{ height: '100vh', width: '100vw' }}>
|
|
49
|
+
<Split mode="horizontal" initialSizes={['30%', '70%']}>
|
|
50
|
+
<div className="sidebar">Sidebar</div>
|
|
51
|
+
<div className="main">Main Content Area</div>
|
|
52
|
+
</Split>
|
|
53
|
+
</div>
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
---
|
|
59
|
+
|
|
60
|
+
## 🧩 Plugins
|
|
61
|
+
|
|
62
|
+
Extend the splitter with powerful built-in plugins:
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
import { Split, keyboardPlugin, persistencePlugin } from '@a-multilayout-splitter/core';
|
|
66
|
+
|
|
67
|
+
<Split
|
|
68
|
+
plugins={[
|
|
69
|
+
keyboardPlugin(), // Arrows and numbers to resize/focus
|
|
70
|
+
persistencePlugin({ key: 'user-layout' }) // Auto-save state
|
|
71
|
+
]}
|
|
72
|
+
>
|
|
73
|
+
{/* Panes */}
|
|
74
|
+
</Split>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
---
|
|
78
|
+
|
|
79
|
+
## 🤝 Contributing
|
|
80
|
+
|
|
81
|
+
We welcome contributions! Please see our [Contributing Guide](https://github.com/AmanKrr/A-MultiLayout-Splitter/blob/v6/CONTRIBUTING.md) to get started.
|
|
82
|
+
|
|
83
|
+
## 📄 License
|
|
84
|
+
|
|
85
|
+
MIT © [Aman Kumar](https://github.com/AmanKrr)
|
package/package.json
CHANGED
|
@@ -1,7 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@a-multilayout-splitter/core",
|
|
3
|
-
"version": "6.0.0-alpha.
|
|
3
|
+
"version": "6.0.0-alpha.3",
|
|
4
4
|
"description": "A modern React component for building resizable, multi-pane layouts with flexible split views and complex layout support.",
|
|
5
|
+
"author": "Aman Kumar",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"homepage": "https://amankrr.github.io/A-MultiLayout-Splitter/",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "git+https://github.com/AmanKrr/A-MultiLayout-Splitter.git",
|
|
11
|
+
"directory": "packages/core"
|
|
12
|
+
},
|
|
13
|
+
"bugs": {
|
|
14
|
+
"url": "https://github.com/AmanKrr/A-MultiLayout-Splitter/issues"
|
|
15
|
+
},
|
|
5
16
|
"type": "module",
|
|
6
17
|
"main": "./dist/index.cjs",
|
|
7
18
|
"module": "./dist/index.js",
|
|
@@ -15,7 +26,8 @@
|
|
|
15
26
|
"./style.css": "./dist/style.css"
|
|
16
27
|
},
|
|
17
28
|
"files": [
|
|
18
|
-
"dist"
|
|
29
|
+
"dist",
|
|
30
|
+
"README.md"
|
|
19
31
|
],
|
|
20
32
|
"scripts": {
|
|
21
33
|
"dev": "vite build --watch",
|