{"_id":"@akkuma/react-resizable-panels","_rev":"2-4aaa7c00f7cbf54d5ea25bac2b4e5929","name":"@akkuma/react-resizable-panels","description":"React components for resizable panel groups/layouts","dist-tags":{"latest":"2.0.21-test.0"},"versions":{"2.0.20":{"name":"@akkuma/react-resizable-panels","version":"2.0.20","author":{"name":"Brian Vaughn","email":"brian.david.vaughn@gmail.com"},"license":"MIT","_id":"@akkuma/react-resizable-panels@2.0.20","homepage":"https://github.com/bvaughn/react-resizable-panels#readme","bugs":{"url":"https://github.com/bvaughn/react-resizable-panels/issues"},"dist":{"shasum":"35bfa5f75cf4df1b873930dde03d3e9f83ea69b4","tarball":"https://registry.npmjs.org/@akkuma/react-resizable-panels/-/react-resizable-panels-2.0.20.tgz","fileCount":115,"integrity":"sha512-gnGpeBeBoCXNzVU3+b9zUW3xNEzgX0MyUx6BNlqaLzMEIJ9ddoVtshx5QRnSpcYim9TF7o2o8uYozPu7oqFJTw==","signatures":[{"sig":"MEQCIGQ8s82yG3mFFEUznzeSFG6swCVtBp5sqWEV9afEVSdPAiA853HBlZy4m0vprH04IikU6ieCpnJ9B+0UfAUPTYVrxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1239120},"main":"dist/react-resizable-panels.cjs.js","_from":"file:akkuma-react-resizable-panels-2.0.20.tgz","types":"dist/react-resizable-panels.cjs.d.ts","module":"dist/react-resizable-panels.esm.js","source":"src/index.ts","exports":{".":{"node":{"import":"./dist/react-resizable-panels.node.cjs.mjs","module":"./dist/react-resizable-panels.node.esm.js","default":"./dist/react-resizable-panels.node.cjs.js"},"types":{"import":"./dist/react-resizable-panels.cjs.mjs","default":"./dist/react-resizable-panels.cjs.js"},"import":"./dist/react-resizable-panels.cjs.mjs","module":"./dist/react-resizable-panels.esm.js","browser":{"import":"./dist/react-resizable-panels.browser.cjs.mjs","module":"./dist/react-resizable-panels.browser.esm.js","default":"./dist/react-resizable-panels.browser.cjs.js"},"default":"./dist/react-resizable-panels.cjs.js","development":{"node":{"import":"./dist/react-resizable-panels.development.node.cjs.mjs","module":"./dist/react-resizable-panels.development.node.esm.js","default":"./dist/react-resizable-panels.development.node.cjs.js"},"import":"./dist/react-resizable-panels.development.cjs.mjs","module":"./dist/react-resizable-panels.development.esm.js","browser":{"import":"./dist/react-resizable-panels.browser.development.cjs.mjs","module":"./dist/react-resizable-panels.browser.development.esm.js","default":"./dist/react-resizable-panels.browser.development.cjs.js"},"default":"./dist/react-resizable-panels.development.cjs.js"}},"./package.json":"./package.json"},"imports":{"#is-browser":{"node":"./src/env-conditions/node.ts","browser":"./src/env-conditions/browser.ts","default":"./src/env-conditions/unknown.ts"},"#is-development":{"default":"./src/env-conditions/production.ts","development":"./src/env-conditions/development.ts"}},"scripts":{"lint":"eslint \"src/**/*.{ts,tsx}\"","test":"jest --config=jest.config.js","watch":"parcel watch --port=2345","test:watch":"jest --config=jest.config.js --watch"},"_npmUser":{"name":"akkuma","email":"akkuma+npmjs@gmail.com"},"_resolved":"/private/var/folders/bh/qjsjclc95jq_xxmgk4nfggkm0000gn/T/b0ef1768efcb38a702bb32fd0e481e97/akkuma-react-resizable-panels-2.0.20.tgz","_integrity":"sha512-gnGpeBeBoCXNzVU3+b9zUW3xNEzgX0MyUx6BNlqaLzMEIJ9ddoVtshx5QRnSpcYim9TF7o2o8uYozPu7oqFJTw==","repository":{"url":"git+https://github.com/bvaughn/react-resizable-panels.git","type":"git"},"_npmVersion":"10.5.0","description":"React components for resizable panel groups/layouts","directories":{},"_nodeVersion":"21.7.1","browserslist":["Chrome 79"],"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","react":"experimental","eslint":"^8.37.0","react-dom":"experimental","jest-environment-jsdom":"^29.7.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-no-restricted-imports":"^0.0.0","@babel/plugin-proposal-optional-chaining":"7.21.0","@babel/plugin-proposal-nullish-coalescing-operator":"7.18.6"},"peerDependencies":{"react":"^16.14.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.14.0 || ^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-resizable-panels_2.0.20_1719240861616_0.25489358944867657","host":"s3://npm-registry-packages"}},"2.0.21":{"name":"@akkuma/react-resizable-panels","version":"2.0.21","author":{"name":"Brian Vaughn","email":"brian.david.vaughn@gmail.com"},"license":"MIT","_id":"@akkuma/react-resizable-panels@2.0.21","homepage":"https://github.com/bvaughn/react-resizable-panels#readme","bugs":{"url":"https://github.com/bvaughn/react-resizable-panels/issues"},"dist":{"shasum":"a9075f3811238ffb3890f020c11b385f1c69b2e1","tarball":"https://registry.npmjs.org/@akkuma/react-resizable-panels/-/react-resizable-panels-2.0.21.tgz","fileCount":115,"integrity":"sha512-yphzH1TyeenIiGeJuzllhW1mLKdtfhj/djmJDp35tL0CYlDt3RQoT0HRs5n6Pl+QEv0ZxQZI6KeZZG7Q845XBQ==","signatures":[{"sig":"MEUCIQCAH+uC79bx57tmS3knKuyEoGVrlqG4bj/FrW1dX5LNigIgDHshStbw0fVdRGVWYt2nNJBVXscPa1x58haBPM3qpVQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1239216},"main":"dist/react-resizable-panels.cjs.js","_from":"file:akkuma-react-resizable-panels-2.0.21.tgz","types":"dist/react-resizable-panels.cjs.d.ts","module":"dist/react-resizable-panels.esm.js","source":"src/index.ts","exports":{".":{"node":{"import":"./dist/react-resizable-panels.node.cjs.mjs","module":"./dist/react-resizable-panels.node.esm.js","default":"./dist/react-resizable-panels.node.cjs.js"},"types":{"import":"./dist/react-resizable-panels.cjs.mjs","default":"./dist/react-resizable-panels.cjs.js"},"import":"./dist/react-resizable-panels.cjs.mjs","module":"./dist/react-resizable-panels.esm.js","browser":{"import":"./dist/react-resizable-panels.browser.cjs.mjs","module":"./dist/react-resizable-panels.browser.esm.js","default":"./dist/react-resizable-panels.browser.cjs.js"},"default":"./dist/react-resizable-panels.cjs.js","development":{"node":{"import":"./dist/react-resizable-panels.development.node.cjs.mjs","module":"./dist/react-resizable-panels.development.node.esm.js","default":"./dist/react-resizable-panels.development.node.cjs.js"},"import":"./dist/react-resizable-panels.development.cjs.mjs","module":"./dist/react-resizable-panels.development.esm.js","browser":{"import":"./dist/react-resizable-panels.browser.development.cjs.mjs","module":"./dist/react-resizable-panels.browser.development.esm.js","default":"./dist/react-resizable-panels.browser.development.cjs.js"},"default":"./dist/react-resizable-panels.development.cjs.js"}},"./package.json":"./package.json"},"imports":{"#is-browser":{"node":"./src/env-conditions/node.ts","browser":"./src/env-conditions/browser.ts","default":"./src/env-conditions/unknown.ts"},"#is-development":{"default":"./src/env-conditions/production.ts","development":"./src/env-conditions/development.ts"}},"scripts":{"lint":"eslint \"src/**/*.{ts,tsx}\"","test":"jest --config=jest.config.js","watch":"parcel watch --port=2345","test:watch":"jest --config=jest.config.js --watch"},"_npmUser":{"name":"akkuma","email":"akkuma+npmjs@gmail.com"},"_resolved":"/private/var/folders/bh/qjsjclc95jq_xxmgk4nfggkm0000gn/T/da6d6ec24071b8048e16d34e87508166/akkuma-react-resizable-panels-2.0.21.tgz","_integrity":"sha512-yphzH1TyeenIiGeJuzllhW1mLKdtfhj/djmJDp35tL0CYlDt3RQoT0HRs5n6Pl+QEv0ZxQZI6KeZZG7Q845XBQ==","repository":{"url":"git+https://github.com/bvaughn/react-resizable-panels.git","type":"git"},"_npmVersion":"10.5.0","description":"React components for resizable panel groups/layouts","directories":{},"_nodeVersion":"21.7.1","browserslist":["Chrome 79"],"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","react":"experimental","eslint":"^8.37.0","react-dom":"experimental","jest-environment-jsdom":"^29.7.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-no-restricted-imports":"^0.0.0","@babel/plugin-proposal-optional-chaining":"7.21.0","@babel/plugin-proposal-nullish-coalescing-operator":"7.18.6"},"peerDependencies":{"react":"^16.14.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.14.0 || ^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-resizable-panels_2.0.21_1719241244663_0.3015379694382325","host":"s3://npm-registry-packages"}},"2.0.21-test.0":{"name":"@akkuma/react-resizable-panels","version":"2.0.21-test.0","description":"React components for resizable panel groups/layouts","author":{"name":"Brian Vaughn","email":"brian.david.vaughn@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/bvaughn/react-resizable-panels.git"},"source":"src/index.ts","main":"dist/react-resizable-panels.cjs.js","module":"dist/react-resizable-panels.esm.js","exports":{".":{"types":{"import":"./dist/react-resizable-panels.cjs.mjs","default":"./dist/react-resizable-panels.cjs.js"},"development":{"browser":{"module":"./dist/react-resizable-panels.browser.development.esm.js","import":"./dist/react-resizable-panels.browser.development.cjs.mjs","default":"./dist/react-resizable-panels.browser.development.cjs.js"},"node":{"module":"./dist/react-resizable-panels.development.node.esm.js","import":"./dist/react-resizable-panels.development.node.cjs.mjs","default":"./dist/react-resizable-panels.development.node.cjs.js"},"module":"./dist/react-resizable-panels.development.esm.js","import":"./dist/react-resizable-panels.development.cjs.mjs","default":"./dist/react-resizable-panels.development.cjs.js"},"browser":{"module":"./dist/react-resizable-panels.browser.esm.js","import":"./dist/react-resizable-panels.browser.cjs.mjs","default":"./dist/react-resizable-panels.browser.cjs.js"},"node":{"module":"./dist/react-resizable-panels.node.esm.js","import":"./dist/react-resizable-panels.node.cjs.mjs","default":"./dist/react-resizable-panels.node.cjs.js"},"module":"./dist/react-resizable-panels.esm.js","import":"./dist/react-resizable-panels.cjs.mjs","default":"./dist/react-resizable-panels.cjs.js"},"./package.json":"./package.json"},"imports":{"#is-development":{"development":"./src/env-conditions/development.ts","default":"./src/env-conditions/production.ts"},"#is-browser":{"browser":"./src/env-conditions/browser.ts","node":"./src/env-conditions/node.ts","default":"./src/env-conditions/unknown.ts"}},"types":"dist/react-resizable-panels.cjs.d.ts","devDependencies":{"@babel/plugin-proposal-nullish-coalescing-operator":"7.18.6","@babel/plugin-proposal-optional-chaining":"7.21.0","eslint":"^8.37.0","eslint-plugin-no-restricted-imports":"^0.0.0","eslint-plugin-react-hooks":"^4.6.0","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","react":"experimental","react-dom":"experimental"},"peerDependencies":{"react":"^16.14.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.14.0 || ^17.0.0 || ^18.0.0"},"browserslist":["Chrome 79"],"scripts":{"lint":"eslint \"src/**/*.{ts,tsx}\"","test":"jest --config=jest.config.js","test:watch":"jest --config=jest.config.js --watch","watch":"parcel watch --port=2345"},"bugs":{"url":"https://github.com/bvaughn/react-resizable-panels/issues"},"homepage":"https://github.com/bvaughn/react-resizable-panels#readme","_id":"@akkuma/react-resizable-panels@2.0.21-test.0","_integrity":"sha512-FfMK6YbuKzzosWSDTcZrpaQB62eJkmd7XhgRst1L1BD+Uey+30hKvOz2pAZokRsv5rpiqK3N1ROT6WWtOBuItA==","_resolved":"/private/var/folders/bh/qjsjclc95jq_xxmgk4nfggkm0000gn/T/47058583a32fad9e390e0ab65c5fb457/akkuma-react-resizable-panels-2.0.21-test.0.tgz","_from":"file:akkuma-react-resizable-panels-2.0.21-test.0.tgz","_nodeVersion":"21.7.1","_npmVersion":"10.5.0","dist":{"integrity":"sha512-FfMK6YbuKzzosWSDTcZrpaQB62eJkmd7XhgRst1L1BD+Uey+30hKvOz2pAZokRsv5rpiqK3N1ROT6WWtOBuItA==","shasum":"57d1d419141023b09e242fa503296d705f49d6bb","tarball":"https://registry.npmjs.org/@akkuma/react-resizable-panels/-/react-resizable-panels-2.0.21-test.0.tgz","fileCount":115,"unpackedSize":1238732,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLMB5GldyDXxTquWLxoBt3fWiOb/louL+0NhbpD9G+7wIhAIJL8As0TiqUPyYceKIWPs6MyfWcUosMvHqXim25E8b+"}]},"_npmUser":{"name":"akkuma","email":"akkuma+npmjs@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-resizable-panels_2.0.21-test.0_1719253266130_0.3240595830674937"},"_hasShrinkwrap":false}},"time":{"created":"2024-06-24T14:54:21.485Z","modified":"2024-06-24T18:21:06.501Z","2.0.20":"2024-06-24T14:54:21.843Z","2.0.21":"2024-06-24T15:00:44.872Z","2.0.21-test.0":"2024-06-24T18:21:06.351Z"},"maintainers":[{"name":"akkuma","email":"akkuma+npmjs@gmail.com"}],"author":{"name":"Brian Vaughn","email":"brian.david.vaughn@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/bvaughn/react-resizable-panels.git"},"license":"MIT","homepage":"https://github.com/bvaughn/react-resizable-panels#readme","bugs":{"url":"https://github.com/bvaughn/react-resizable-panels/issues"},"readme":"# react-resizable-panels\n\nReact components for resizable panel groups/layouts\n\n```jsx\nimport { Panel, PanelGroup, PanelResizeHandle } from \"react-resizable-panels\";\n\n\n \n \n \n \n \n \n \n \n \n \n \n;\n```\n\n## If you like this project, 🎉 [become a sponsor](https://github.com/sponsors/bvaughn/) or ☕ [buy me a coffee](http://givebrian.coffee/)\n\n## Props\n\n### `PanelGroup`\n\n| prop | type | description |\n| :----------- | :--------------------------- | :--------------------------------------------------------------- |\n| `autoSaveId` | `?string` | Unique id used to auto-save group arrangement via `localStorage` |\n| `children` | `ReactNode` | Arbitrary React element(s) |\n| `className` | `?string` | Class name to attach to root element |\n| `direction` | `\"horizontal\" \\| \"vertical\"` | Group orientation |\n| `id` | `?string` | Group id; falls back to `useId` when not provided |\n| `onLayout` | `?(sizes: number[]) => void` | Called when group layout changes |\n| `storage` | `?PanelGroupStorage` | Custom storage API; defaults to `localStorage` 1 |\n| `style` | `?CSSProperties` | CSS style to attach to root element |\n| `tagName` | `?string = \"div\"` | HTML element tag name for root element |\n\n1: Storage API must define the following _synchronous_ methods:\n\n- `getItem: (name:string) => string`\n- `setItem: (name: string, value: string) => void`\n\n`PanelGroup` components also expose an imperative API for manual resizing:\n| method | description |\n| :---------------------------- | :--------------------------------------------------------------- |\n| `getId(): string` | Gets the panel group's ID. |\n| `getLayout(): number[]` | Gets the panel group's current _layout_ (`[1 - 100, ...]`). |\n| `setLayout(layout: number[])` | Resize panel group to the specified _layout_ (`[1 - 100, ...]`). |\n\n### `Panel`\n\n| prop | type | description |\n| :-------------- | :------------------------ | :-------------------------------------------------------------------------------------------- |\n| `children` | `ReactNode` | Arbitrary React element(s) |\n| `className` | `?string` | Class name to attach to root element |\n| `collapsedSize` | `?number=0` | Panel should collapse to this size |\n| `collapsible` | `?boolean=false` | Panel should collapse when resized beyond its `minSize` |\n| `defaultSize` | `?number` | Initial size of panel (numeric value between 1-100) |\n| `id` | `?string` | Panel id (unique within group); falls back to `useId` when not provided |\n| `maxSize` | `?number = 100` | Maximum allowable size of panel (numeric value between 1-100); defaults to `100` |\n| `minSize` | `?number = 10` | Minimum allowable size of panel (numeric value between 1-100); defaults to `10` |\n| `onCollapse` | `?() => void` | Called when panel is collapsed |\n| `onExpand` | `?() => void` | Called when panel is expanded |\n| `onResize` | `?(size: number) => void` | Called when panel is resized; `size` parameter is a numeric value between 1-100. 1 |\n| `order` | `?number` | Order of panel within group; required for groups with conditionally rendered panels |\n| `style` | `?CSSProperties` | CSS style to attach to root element |\n| `tagName` | `?string = \"div\"` | HTML element tag name for root element |\n\n1: If any `Panel` has an `onResize` callback, the `order` prop should be provided for all `Panel`s.\n\n`Panel` components also expose an imperative API for manual resizing:\n| method | description |\n| :----------------------- | :--------------------------------------------------------------------------------- |\n| `collapse()` | If panel is `collapsible`, collapse it fully. |\n| `expand()` | If panel is currently _collapsed_, expand it to its most recent size. |\n| `getId(): string` | Gets the ID of the panel. |\n| `getSize(): number` | Gets the current size of the panel as a percentage (`1 - 100`). |\n| `isCollapsed(): boolean` | Returns `true` if the panel is currently _collapsed_ (`size === 0`). |\n| `isExpanded(): boolean` | Returns `true` if the panel is currently _not collapsed_ (`!isCollapsed()`). |\n| `getSize(): number` | Returns the most recently committed size of the panel as a percentage (`1 - 100`). |\n| `resize(size: number)` | Resize panel to the specified _percentage_ (`1 - 100`). |\n\n### `PanelResizeHandle`\n\n| prop | type | description |\n| :--------------- | :-------------------------------------------- | :------------------------------------------------------------------------------ |\n| `children` | `?ReactNode` | Custom drag UI; can be any arbitrary React element(s) |\n| `className` | `?string` | Class name to attach to root element |\n| `hitAreaMargins` | `?{ coarse: number = 15; fine: number = 5; }` | Allow this much margin when determining resizable handle hit detection |\n| `disabled` | `?boolean` | Disable drag handle |\n| `id` | `?string` | Resize handle id (unique within group); falls back to `useId` when not provided |\n| `onDragging` | `?(isDragging: boolean) => void` | Called when group layout changes |\n| `style` | `?CSSProperties` | CSS style to attach to root element |\n| `tagName` | `?string = \"div\"` | HTML element tag name for root element |\n\n---\n\n## FAQ\n\n### Can panel sizes be specified in pixels?\n\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.\n\n### How can I fix layout/sizing problems with conditionally rendered panels?\n\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.\n\n```tsx\n\n {renderSideBar && (\n <>\n \n \n \n \n \n )}\n \n
\n \n\n```\n\n### Can a attach a ref to the DOM elements?\n\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:\n\n```tsx\nimport {\n getPanelElement,\n getPanelGroupElement,\n getResizeHandleElement,\n Panel,\n PanelGroup,\n PanelResizeHandle,\n} from \"react-resizable-panels\";\n\nexport function Example() {\n const refs = useRef();\n\n useEffect(() => {\n const groupElement = getPanelGroupElement(\"group\");\n const leftPanelElement = getPanelElement(\"left-panel\");\n const rightPanelElement = getPanelElement(\"right-panel\");\n const resizeHandleElement = getResizeHandleElement(\"resize-handle\");\n\n // If you want to, you can store them in a ref to pass around\n refs.current = {\n groupElement,\n leftPanelElement,\n rightPanelElement,\n resizeHandleElement,\n };\n }, []);\n\n return (\n \n {/* ... */}\n \n {/* ... */}\n \n );\n}\n```\n\n### Why don't I see any resize UI?\n\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:\n\n```tsx\n// Tailwind example\n\n```\n\n### How can I use persistent layouts with SSR?\n\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:\n\n#### Server component\n\n```tsx\nimport ResizablePanels from \"@/app/ResizablePanels\";\nimport { cookies } from \"next/headers\";\n\nexport function ServerComponent() {\n const layout = cookies().get(\"react-resizable-panels:layout\");\n\n let defaultLayout;\n if (layout) {\n defaultLayout = JSON.parse(layout.value);\n }\n\n return ;\n}\n```\n\n#### Client component\n\n```tsx\n\"use client\";\n\nimport { Panel, PanelGroup, PanelResizeHandle } from \"react-resizable-panels\";\n\nexport function ClientComponent({\n defaultLayout = [33, 67],\n}: {\n defaultLayout: number[] | undefined;\n}) {\n const onLayout = (sizes: number[]) => {\n document.cookie = `react-resizable-panels:layout=${JSON.stringify(sizes)}`;\n };\n\n return (\n \n {/* ... */}\n \n {/* ... */}\n \n );\n}\n```\n\n> [!NOTE]\n> Be sure to specify a `defaultSize` prop for **every** `Panel` component to avoid layout flicker.\n\nA demo of this is available [here](https://github.com/bvaughn/react-resizable-panels-demo-ssr).\n","readmeFilename":"README.md"}