From cebd3a067faa4f09950b1eb5eacebb5c567a55b7 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Fri, 23 Dec 2022 12:00:20 -0500 Subject: [PATCH] 0.0.2 -> 0.0.3 --- README.md | 54 ++----------------- .../react-resizable-panels/CHANGELOG.md | 2 +- packages/react-resizable-panels/README.md | 50 +++++++++++++++++ packages/react-resizable-panels/package.json | 2 +- 4 files changed, 56 insertions(+), 52 deletions(-) rename CHANGELOG.md => packages/react-resizable-panels/CHANGELOG.md (52%) create mode 100644 packages/react-resizable-panels/README.md diff --git a/README.md b/README.md index 455e16207..e7941eaf3 100644 --- a/README.md +++ b/README.md @@ -1,52 +1,6 @@ # react-resizable-panels -React components for resizable panel groups/layouts +React components for resizable panel groups/layouts. -[Try a demo on Code Sandbox](https://codesandbox.io/s/react-panel-group-demo-ts9xqk) - -```jsx -import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels"; - - - - - - - - - - - - - - -``` - -## Props - -### `PanelGroup` -| prop | type | description -| :----------- | :-------------------------- | :--- -| `autoSaveId` | `?string` | Unique id used to auto-save group arrangement via `localStorage` -| `children` | `ReactNode[]` | Arbitrary React element(s) -| `className` | `?string` | Class name -| `direction` | `"horizontal" \| "vertical"` | Group orientation -| `height` | `number` | Height of group (in pixels) -| `width` | `number` | Width of group (in pixels) - -### `Panel` -| prop | type | description -| :------------ | :---------- | :--- -| `children` | `ReactNode` | Arbitrary React element(s) -| `className` | `?string` | Class name -| `defaultSize` | `?number` | Initial size of panel (relative to other panels within the group) -| `id` | `string` | Panel id (must be unique within the current group) -| `minSize` | `?number` | Minum allowable size of panel (0.0 - 1.0) - -### `PanelResizeHandle` -| prop | type | description -| :------------ | :----------- | :--- -| `children` | `?ReactNode` | Custom drag UI; can be any arbitrary React element(s) -| `className` | `?string` | Class name -| `disabled` | `?boolean` | Disable drag handle -| `panelAfter` | `string` | Id of panel after (below or to the right of) the drag handle -| `panelBefore` | `string` | Id of panel before (above or to the left of) the drag handle \ No newline at end of file +* [View the website](https://react-resizable-panels.vercel.app/) +* [Read the documentation](https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels) +* [Try it on Code Sandbox](https://codesandbox.io/s/react-resizable-panels-zf7hwd) diff --git a/CHANGELOG.md b/packages/react-resizable-panels/CHANGELOG.md similarity index 52% rename from CHANGELOG.md rename to packages/react-resizable-panels/CHANGELOG.md index ac1fbb593..36dc47938 100644 --- a/CHANGELOG.md +++ b/packages/react-resizable-panels/CHANGELOG.md @@ -1,7 +1,7 @@ # Changelog ## 0.0.3 -* [#3](https://github.com/bvaughn/react-resizable-panels/issues/3): `Panel` visibility can be toggled on/off. `PanelGroup` will persist separate layouts for each combination of visible panels. +* [#3](https://github.com/bvaughn/react-resizable-panels/issues/3): `Panel`s can be conditionally rendered within a group. `PanelGroup` will persist separate layouts for each combination of visible panels. ## 0.0.2 * Documentation-only update. diff --git a/packages/react-resizable-panels/README.md b/packages/react-resizable-panels/README.md new file mode 100644 index 000000000..28f45788f --- /dev/null +++ b/packages/react-resizable-panels/README.md @@ -0,0 +1,50 @@ +# react-resizable-panels +React components for resizable panel groups/layouts + +```jsx +import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels"; + + + + + + + + + + + + + + +``` + +## Props + +### `PanelGroup` +| prop | type | description +| :----------- | :-------------------------- | :--- +| `autoSaveId` | `?string` | Unique id used to auto-save group arrangement via `localStorage` +| `children` | `ReactNode[]` | Arbitrary React element(s) +| `className` | `?string` | Class name +| `direction` | `"horizontal" \| "vertical"` | Group orientation +| `height` | `number` | Height of group (in pixels) +| `width` | `number` | Width of group (in pixels) + +### `Panel` +| prop | type | description +| :------------ | :---------- | :--- +| `children` | `ReactNode` | Arbitrary React element(s) +| `className` | `?string` | Class name +| `defaultSize` | `?number` | Initial size of panel (relative to other panels within the group) +| `id` | `string` | Panel id (must be unique within the current group) +| `minSize` | `?number` | Minum allowable size of panel (0.0 - 1.0) + +### `PanelResizeHandle` +| prop | type | description +| :------------ | :----------- | :--- +| `children` | `?ReactNode` | Custom drag UI; can be any arbitrary React element(s) +| `className` | `?string` | Class name +| `disabled` | `?boolean` | Disable drag handle +| `panelAfter` | `string` | Id of panel after (below or to the right of) the drag handle +| `panelBefore` | `string` | Id of panel before (above or to the left of) the drag handle \ No newline at end of file diff --git a/packages/react-resizable-panels/package.json b/packages/react-resizable-panels/package.json index 16e8c467b..177916ba5 100644 --- a/packages/react-resizable-panels/package.json +++ b/packages/react-resizable-panels/package.json @@ -1,6 +1,6 @@ { "name": "react-resizable-panels", - "version": "0.0.2", + "version": "0.0.3", "description": "React components for resizable panel groups/layouts", "author": "Brian Vaughn ", "license": "MIT",