{"_id":"@arteria32/react-resizable-panels-custom-steps","name":"@arteria32/react-resizable-panels-custom-steps","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@arteria32/react-resizable-panels-custom-steps","version":"0.0.1","type":"module","description":"React components for resizable panel groups/layouts. forked from bvaughn/react-resizable-panels","author":{"name":"arteria32"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/arteria32/react-resizable-panels-custom-steps-custom-steps.git"},"source":"src/index.ts","exports":{".":{"types":"./dist/arteria32-react-resizable-panels-custom-steps.js","development":{"edge-light":"./dist/arteria32-react-resizable-panels-custom-steps.development.edge-light.js","worker":"./dist/arteria32-react-resizable-panels-custom-steps.development.edge-light.js","workerd":"./dist/arteria32-react-resizable-panels-custom-steps.development.edge-light.js","browser":"./dist/arteria32-react-resizable-panels-custom-steps.browser.development.js","node":"./dist/arteria32-react-resizable-panels-custom-steps.development.edge-light.js","default":"./dist/arteria32-react-resizable-panels-custom-steps.development.js"},"edge-light":"./dist/arteria32-react-resizable-panels-custom-steps.edge-light.js","worker":"./dist/arteria32-react-resizable-panels-custom-steps.edge-light.js","workerd":"./dist/arteria32-react-resizable-panels-custom-steps.edge-light.js","browser":"./dist/arteria32-react-resizable-panels-custom-steps.browser.js","node":"./dist/arteria32-react-resizable-panels-custom-steps.edge-light.js","default":"./dist/arteria32-react-resizable-panels-custom-steps.js"},"./package.json":"./package.json"},"imports":{"#is-development":{"development":"./src/env-conditions/development.ts","default":"./src/env-conditions/production.ts"},"#is-browser":{"edge-light":"./src/env-conditions/server.ts","workerd":"./src/env-conditions/server.ts","worker":"./src/env-conditions/server.ts","browser":"./src/env-conditions/browser.ts","node":"./src/env-conditions/server.ts","default":"./src/env-conditions/check-is-browser.ts"}},"types":"dist/arteria32-react-resizable-panels-custom-steps.d.ts","scripts":{"clear":"pnpm run clear:builds & pnpm run clear:node_modules","clear:builds":"rm -rf ./packages/*/dist","clear:node_modules":"rm -rf ./node_modules","lint":"eslint \"src/**/*.{ts,tsx}\"","test:browser":"vitest","test:node":"vitest -c vitest.node.config.ts","watch":"parcel watch --port=2345"},"devDependencies":{"@babel/plugin-proposal-nullish-coalescing-operator":"7.18.6","@babel/plugin-proposal-optional-chaining":"7.21.0","@vitest/ui":"^3.1.2","eslint":"^8.37.0","eslint-plugin-react-hooks":"^4.6.0","jsdom":"^26.1.0","react":"experimental","react-dom":"experimental","vitest":"^3.1.2"},"peerDependencies":{"react":"^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc","react-dom":"^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"},"browserslist":["Chrome 79"],"_id":"@arteria32/react-resizable-panels-custom-steps@0.0.1","gitHead":"38dcb5c82d16fdb192fc42ae967744d39d678bd6","bugs":{"url":"https://github.com/arteria32/react-resizable-panels-custom-steps-custom-steps/issues"},"homepage":"https://github.com/arteria32/react-resizable-panels-custom-steps-custom-steps#readme","_nodeVersion":"22.11.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-4/XEZuT13xSnQYC1/cCATzaCoMRLnuRaHJxVQczPEquzk5vzeKd8dQbHf+NHb3aiwjppkdJtZYuQNyNU26FdzA==","shasum":"10910bafc819fb224a421e487c77e0138b9980e0","tarball":"https://registry.npmjs.org/@arteria32/react-resizable-panels-custom-steps/-/react-resizable-panels-custom-steps-0.0.1.tgz","fileCount":30,"unpackedSize":532922,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDCb424tOHsMvGSBg8cYBO05BscdXHLwxyu9qBTuBG6qwIgFcisctuBRKypqQMzxSWJRJ6EJkwpj2rPCwsgaT1h1JI="}]},"_npmUser":{"name":"arteria32","email":"denis.rjabko@mail.ru"},"directories":{},"maintainers":[{"name":"arteria32","email":"denis.rjabko@mail.ru"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-resizable-panels-custom-steps_0.0.1_1752603368065_0.40709577551714915"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-15T18:16:07.948Z","0.0.1":"2025-07-15T18:16:08.243Z","modified":"2025-07-15T18:16:08.507Z"},"maintainers":[{"name":"arteria32","email":"denis.rjabko@mail.ru"}],"description":"React components for resizable panel groups/layouts. forked from bvaughn/react-resizable-panels","homepage":"https://github.com/arteria32/react-resizable-panels-custom-steps-custom-steps#readme","repository":{"type":"git","url":"git+https://github.com/arteria32/react-resizable-panels-custom-steps-custom-steps.git"},"author":{"name":"arteria32"},"bugs":{"url":"https://github.com/arteria32/react-resizable-panels-custom-steps-custom-steps/issues"},"license":"MIT","readme":"# react-resizable-panels\r\n\r\nReact components for resizable panel groups/layouts\r\n\r\n```jsx\r\nimport { Panel, PanelGroup, PanelResizeHandle } from \"react-resizable-panels\";\r\n\r\n<PanelGroup autoSaveId=\"example\" direction=\"horizontal\">\r\n  <Panel defaultSize={25}>\r\n    <SourcesExplorer />\r\n  </Panel>\r\n  <PanelResizeHandle />\r\n  <Panel>\r\n    <SourceViewer />\r\n  </Panel>\r\n  <PanelResizeHandle />\r\n  <Panel defaultSize={25}>\r\n    <Console />\r\n  </Panel>\r\n</PanelGroup>;\r\n```\r\n\r\n## If you like this project, 🎉 [become a sponsor](https://github.com/sponsors/bvaughn/) or ☕ [buy me a coffee](http://givebrian.coffee/)\r\n\r\n## Props\r\n\r\n### `PanelGroup`\r\n\r\n| prop         | type                         | description                                                      |\r\n| :----------- | :--------------------------- | :--------------------------------------------------------------- |\r\n| `autoSaveId` | `?string`                    | Unique id used to auto-save group arrangement via `localStorage` |\r\n| `children`   | `ReactNode`                  | Arbitrary React element(s)                                       |\r\n| `className`  | `?string`                    | Class name to attach to root element                             |\r\n| `direction`  | `\"horizontal\" \\| \"vertical\"` | Group orientation                                                |\r\n| `id`         | `?string`                    | Group id; falls back to `useId` when not provided                |\r\n| `onLayout`   | `?(sizes: number[]) => void` | Called when group layout changes                                 |\r\n| `storage`    | `?PanelGroupStorage`         | Custom storage API; defaults to `localStorage` <sup>1</sup>      |\r\n| `style`      | `?CSSProperties`             | CSS style to attach to root element                              |\r\n| `tagName`    | `?string = \"div\"`            | HTML element tag name for root element                           |\r\n\r\n<sup>1</sup>: Storage API must define the following _synchronous_ methods:\r\n\r\n- `getItem: (name:string) => string`\r\n- `setItem: (name: string, value: string) => void`\r\n\r\n`PanelGroup` components also expose an imperative API for manual resizing:\r\n| method                        | description                                                      |\r\n| :---------------------------- | :--------------------------------------------------------------- |\r\n| `getId(): string`             | Gets the panel group's ID.                                       |\r\n| `getLayout(): number[]`       | Gets the panel group's current _layout_ (`[1 - 100, ...]`).      |\r\n| `setLayout(layout: number[])` | Resize panel group to the specified _layout_ (`[1 - 100, ...]`). |\r\n\r\n### `Panel`\r\n\r\n| prop            | type                      | description                                                                                   |\r\n| :-------------- | :------------------------ | :-------------------------------------------------------------------------------------------- |\r\n| `children`      | `ReactNode`               | Arbitrary React element(s)                                                                    |\r\n| `className`     | `?string`                 | Class name to attach to root element                                                          |\r\n| `collapsedSize` | `?number=0`               | Panel should collapse to this size                                                            |\r\n| `collapsible`   | `?boolean=false`          | Panel should collapse when resized beyond its `minSize`                                       |\r\n| `defaultSize`   | `?number`                 | Initial size of panel (numeric value between 1-100)                                           |\r\n| `id`            | `?string`                 | Panel id (unique within group); falls back to `useId` when not provided                       |\r\n| `maxSize`       | `?number = 100`           | Maximum allowable size of panel (numeric value between 1-100); defaults to `100`              |\r\n| `minSize`       | `?number = 10`            | Minimum allowable size of panel (numeric value between 1-100); defaults to `10`               |\r\n| `onCollapse`    | `?() => void`             | Called when panel is collapsed                                                                |\r\n| `onExpand`      | `?() => void`             | Called when panel is expanded                                                                 |\r\n| `onResize`      | `?(size: number) => void` | Called when panel is resized; `size` parameter is a numeric value between 1-100. <sup>1</sup> |\r\n| `order`         | `?number`                 | Order of panel within group; required for groups with conditionally rendered panels           |\r\n| `style`         | `?CSSProperties`          | CSS style to attach to root element                                                           |\r\n| `tagName`       | `?string = \"div\"`         | HTML element tag name for root element                                                        |\r\n\r\n<sup>1</sup>: If any `Panel` has an `onResize` callback, the `order` prop should be provided for all `Panel`s.\r\n\r\n`Panel` components also expose an imperative API for manual resizing:\r\n| method                   | description                                                                        |\r\n| :----------------------- | :--------------------------------------------------------------------------------- |\r\n| `collapse()`             | If panel is `collapsible`, collapse it fully.                                      |\r\n| `expand()`               | If panel is currently _collapsed_, expand it to its most recent size.              |\r\n| `getId(): string`        | Gets the ID of the panel.                                                          |\r\n| `getSize(): number`      | Gets the current size of the panel as a percentage (`1 - 100`).                    |\r\n| `isCollapsed(): boolean` | Returns `true` if the panel is currently _collapsed_ (`size === 0`).               |\r\n| `isExpanded(): boolean`  | Returns `true` if the panel is currently _not collapsed_ (`!isCollapsed()`).       |\r\n| `getSize(): number`      | Returns the most recently committed size of the panel as a percentage (`1 - 100`). |\r\n| `resize(size: number)`   | Resize panel to the specified _percentage_ (`1 - 100`).                            |\r\n\r\n### `PanelResizeHandle`\r\n\r\n| prop             | type                                          | description                                                                     |\r\n| :--------------- | :-------------------------------------------- | :------------------------------------------------------------------------------ |\r\n| `children`       | `?ReactNode`                                  | Custom drag UI; can be any arbitrary React element(s)                           |\r\n| `className`      | `?string`                                     | Class name to attach to root element                                            |\r\n| `hitAreaMargins` | `?{ coarse: number = 15; fine: number = 5; }` | Allow this much margin when determining resizable handle hit detection          |\r\n| `disabled`       | `?boolean`                                    | Disable drag handle                                                             |\r\n| `id`             | `?string`                                     | Resize handle id (unique within group); falls back to `useId` when not provided |\r\n| `onDragging`     | `?(isDragging: boolean) => void`              | Called when group layout changes                                                |\r\n| `style`          | `?CSSProperties`                              | CSS style to attach to root element                                             |\r\n| `tagName`        | `?string = \"div\"`                             | HTML element tag name for root element                                          |\r\n\r\n---\r\n\r\n## FAQ\r\n\r\n### Can panel sizes be specified in pixels?\r\n\r\nNo. Pixel-based constraints [added significant complexity](https://github.com/bvaughn/react-resizable-panels/pull/176) to the initialization and validation logic and so I've decided not to support them. You may be able to implement a version of this yourself following [a pattern like this](https://github.com/bvaughn/react-resizable-panels/issues/46#issuecomment-1368108416) but it is not officially supported by this library.\r\n\r\n### How can I fix layout/sizing problems with conditionally rendered panels?\r\n\r\nThe `Panel` API doesn't _require_ `id` and `order` props because they aren't necessary for static layouts. When panels are conditionally rendered though, it's best to supply these values.\r\n\r\n```tsx\r\n<PanelGroup direction=\"horizontal\">\r\n  {renderSideBar && (\r\n    <>\r\n      <Panel id=\"sidebar\" minSize={25} order={1}>\r\n        <Sidebar />\r\n      </Panel>\r\n      <PanelResizeHandle />\r\n    </>\r\n  )}\r\n  <Panel minSize={25} order={2}>\r\n    <Main />\r\n  </Panel>\r\n</PanelGroup>\r\n```\r\n\r\n### Can a attach a ref to the DOM elements?\r\n\r\nNo. I think exposing two refs (one for the component's imperative API and one for a DOM element) would be awkward. This library does export several utility methods for accessing the underlying DOM elements though. For example:\r\n\r\n```tsx\r\nimport {\r\n  getPanelElement,\r\n  getPanelGroupElement,\r\n  getResizeHandleElement,\r\n  Panel,\r\n  PanelGroup,\r\n  PanelResizeHandle,\r\n} from \"react-resizable-panels\";\r\n\r\nexport function Example() {\r\n  const refs = useRef();\r\n\r\n  useEffect(() => {\r\n    const groupElement = getPanelGroupElement(\"group\");\r\n    const leftPanelElement = getPanelElement(\"left-panel\");\r\n    const rightPanelElement = getPanelElement(\"right-panel\");\r\n    const resizeHandleElement = getResizeHandleElement(\"resize-handle\");\r\n\r\n    // If you want to, you can store them in a ref to pass around\r\n    refs.current = {\r\n      groupElement,\r\n      leftPanelElement,\r\n      rightPanelElement,\r\n      resizeHandleElement,\r\n    };\r\n  }, []);\r\n\r\n  return (\r\n    <PanelGroup direction=\"horizontal\" id=\"group\">\r\n      <Panel id=\"left-panel\">{/* ... */}</Panel>\r\n      <PanelResizeHandle id=\"resize-handle\" />\r\n      <Panel id=\"right-panel\">{/* ... */}</Panel>\r\n    </PanelGroup>\r\n  );\r\n}\r\n```\r\n\r\n### Why don't I see any resize UI?\r\n\r\nThis likely means that you haven't applied any CSS to style the resize handles. By default, a resize handle is just an empty DOM element. To add styling, use the `className` or `style` props:\r\n\r\n```tsx\r\n// Tailwind example\r\n<PanelResizeHandle className=\"w-2 bg-blue-800\" />\r\n```\r\n\r\n### Can panel sizes be persistent?\r\n\r\nYes. Panel groups with an `autoSaveId` prop will automatically save and restore their layouts on mount.\r\n\r\n### How can I use persistent layouts with SSR?\r\n\r\nBy default, this library uses `localStorage` to persist layouts. With server rendering, this can cause a flicker when the default layout (rendered on the server) is replaced with the persisted layout (in `localStorage`). The way to avoid this flicker is to also persist the layout with a cookie like so:\r\n\r\n#### Server component\r\n\r\n```tsx\r\nimport ResizablePanels from \"@/app/ResizablePanels\";\r\nimport { cookies } from \"next/headers\";\r\n\r\nexport function ServerComponent() {\r\n  const layout = cookies().get(\"react-resizable-panels:layout\");\r\n\r\n  let defaultLayout;\r\n  if (layout) {\r\n    defaultLayout = JSON.parse(layout.value);\r\n  }\r\n\r\n  return <ClientComponent defaultLayout={defaultLayout} />;\r\n}\r\n```\r\n\r\n#### Client component\r\n\r\n```tsx\r\n\"use client\";\r\n\r\nimport { Panel, PanelGroup, PanelResizeHandle } from \"react-resizable-panels\";\r\n\r\nexport function ClientComponent({\r\n  defaultLayout = [33, 67],\r\n}: {\r\n  defaultLayout: number[] | undefined;\r\n}) {\r\n  const onLayout = (sizes: number[]) => {\r\n    document.cookie = `react-resizable-panels:layout=${JSON.stringify(sizes)}`;\r\n  };\r\n\r\n  return (\r\n    <PanelGroup direction=\"horizontal\" onLayout={onLayout}>\r\n      <Panel defaultSize={defaultLayout[0]}>{/* ... */}</Panel>\r\n      <PanelResizeHandle className=\"w-2 bg-blue-800\" />\r\n      <Panel defaultSize={defaultLayout[1]}>{/* ... */}</Panel>\r\n    </PanelGroup>\r\n  );\r\n}\r\n```\r\n\r\n> [!NOTE]\r\n> Be sure to specify a `defaultSize` prop for **every** `Panel` component to avoid layout flicker.\r\n\r\nA demo of this is available [here](https://github.com/bvaughn/react-resizable-panels-demo-ssr).\r\n\r\n#### How can I set the [CSP `\"nonce\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) attribute?\r\n\r\n```js\r\nimport { setNonce } from \"react-resizable-panels\";\r\n\r\nsetNonce(\"your-nonce-value-here\");\r\n```\r\n\r\n#### How can I disable global cursor styles?\r\n\r\n```js\r\nimport { disableGlobalCursorStyles } from \"react-resizable-panels\";\r\n\r\ndisableGlobalCursorStyles();\r\n```\r\n","readmeFilename":"README.md","_rev":"1-862972da6635721b7403c6869f9b45b5"}