react-resizable-panels 0.0.1
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/.proxyrc +8 -0
- package/README.md +50 -0
- package/dist/index.8be10522.js +28334 -0
- package/dist/index.8be10522.js.map +1 -0
- package/dist/index.d85b50e4.css +95 -0
- package/dist/index.d85b50e4.css.map +1 -0
- package/dist/index.html +9 -0
- package/dist/react-resizable-panels.d.ts +28 -0
- package/dist/react-resizable-panels.d.ts.map +1 -0
- package/dist/react-resizable-panels.js +272 -0
- package/dist/react-resizable-panels.js.map +1 -0
- package/dist/react-resizable-panels.module.js +266 -0
- package/dist/react-resizable-panels.module.js.map +1 -0
- package/package.json +35 -0
- package/src/Panel.tsx +46 -0
- package/src/PanelContexts.ts +10 -0
- package/src/PanelGroup.tsx +276 -0
- package/src/PanelResizeHandle.tsx +81 -0
- package/src/index.ts +5 -0
- package/src/types.ts +11 -0
- package/tsconfig.json +6 -0
- package/website/demo.tsx +140 -0
- package/website/index.html +9 -0
- package/website/index.tsx +12 -0
- package/website/root.css +15 -0
- package/website/styles.module.css +77 -0
package/.proxyrc
ADDED
package/README.md
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
# react-panel-group
|
|
2
|
+
React components for resizable panel groups/layouts
|
|
3
|
+
|
|
4
|
+
```jsx
|
|
5
|
+
import { Panel, PanelGroup, PanelResizeHandle } from "react-panel-group";
|
|
6
|
+
|
|
7
|
+
<PanelGroup autoSaveId="horizontal-panel" direction="horizontal">
|
|
8
|
+
<Panel defaultSize={0.3} id="sources-explorer-panel">
|
|
9
|
+
<SourcesExplorer />
|
|
10
|
+
</Panel>
|
|
11
|
+
<Panel defaultSize={0.5} id="source-viewer-panel">
|
|
12
|
+
<PanelResizeHandle panelBefore="sources-explorer-panel" panelAfter="source-viewer-panel" />
|
|
13
|
+
<SourceViewer />
|
|
14
|
+
<PanelResizeHandle panelBefore="source-viewer-panel" panelAfter="console-panel" />
|
|
15
|
+
</Panel>
|
|
16
|
+
<Panel defaultSize={0.2} id="console-panel">
|
|
17
|
+
<Console />
|
|
18
|
+
</Panel>
|
|
19
|
+
</PanelGroup>
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Props
|
|
23
|
+
|
|
24
|
+
### `PanelGroup`
|
|
25
|
+
| prop | type | description
|
|
26
|
+
| :----------- | :-------------------------- | :---
|
|
27
|
+
| `autoSaveId` | `?string` | Unique id used to auto-save group arrangement via `localStorage`
|
|
28
|
+
| `children` | `ReactNode[]` | Arbitrary React element(s)
|
|
29
|
+
| `className` | `?string` | Class name
|
|
30
|
+
| `direction` | `"horizontal" | "vertical"` | Group orientation
|
|
31
|
+
| `height` | `number` | Height of group (in pixels)
|
|
32
|
+
| `width` | `number` | Width of group (in pixels)
|
|
33
|
+
|
|
34
|
+
### `Panel`
|
|
35
|
+
| prop | type | description
|
|
36
|
+
| :------------ | :---------- | :---
|
|
37
|
+
| `children` | `ReactNode` | Arbitrary React element(s)
|
|
38
|
+
| `className` | `?string` | Class name
|
|
39
|
+
| `defaultSize` | `?number` | Initial size of panel (relative to other panels within the group)
|
|
40
|
+
| `id` | `string` | Panel id (must be unique within the current group)
|
|
41
|
+
| `minSize` | `?number` | Minum allowable size of panel (0.0 - 1.0)
|
|
42
|
+
|
|
43
|
+
### `PanelResizeHandle`
|
|
44
|
+
| prop | type | description
|
|
45
|
+
| :------------ | :----------- | :---
|
|
46
|
+
| `children` | `?ReactNode` | Custom drag UI; can be any arbitrary React element(s)
|
|
47
|
+
| `className` | `?string` | Class name
|
|
48
|
+
| `disabled` | `?boolean` | Disable drag handle
|
|
49
|
+
| `panelAfter` | `PanelId` | Id of panel after (below or to the right of) the drag handle
|
|
50
|
+
| `panelBefore` | `PanelId` | Id of panel before (above or to the left of) the drag handle
|