[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-71415":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":8,"language":10,"languages":8,"totalLinesOfCode":8,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":14,"stars7d":16,"stars30d":17,"stars90d":15,"forks30d":15,"starsTrendScore":18,"compositeScore":19,"rankGlobal":8,"rankLanguage":8,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":8,"pushedAt":8,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":15,"starSnapshotCount":15,"syncStatus":33,"lastSyncTime":34,"discoverSource":35},71415,"react-resizable-panels","bvaughn\u002Freact-resizable-panels","bvaughn",null,"https:\u002F\u002Freact-resizable-panels.vercel.app\u002F","TypeScript",5296,217,9,1,0,7,45,3,70.02,"MIT License",false,"main",true,[25,26,27,28,29],"group","layout","panel","react","resizable","2026-06-12 04:01:00","\u003Cimg src=\"https:\u002F\u002Freact-resizable-panels.vercel.app\u002Fog.png\" alt=\"react-resizable-panels logo\" width=\"400\" height=\"210\" \u002F>\n\n`react-resizable-panels`: React components for resizable panel groups\u002Flayouts.\n\n## Support\n\nIf you like this project there are several ways to support it:\n\n- [Become a GitHub sponsor](https:\u002F\u002Fgithub.com\u002Fsponsors\u002Fbvaughn\u002F)\n- or [buy me a coffee](http:\u002F\u002Fgivebrian.coffee\u002F)\n\n## Installation\n\nBegin by installing the library from NPM:\n\n```sh\nnpm install react-resizable-panels\n```\n\n## TypeScript types\n\nTypeScript definitions are included within the published `dist` folder\n\n## FAQs\n\nFrequently asked questions can be found [here](https:\u002F\u002Freact-resizable-panels.vercel.app\u002Fcommon-questions).\n\n## Documentation\n\nDocumentation for this project is available at [react-resizable-panels.vercel.app](https:\u002F\u002Freact-resizable-panels.vercel.app\u002F).\n\n### Group\n\n\u003C!-- Group:description:begin -->\nA Group wraps a set of resizable Panel components.\nGroup content can be resized _horizontally_ or _vertically_.\n\nGroup elements always include the following attributes:\n\n```html\n\u003Cdiv data-group data-testid=\"group-id-prop\" id=\"group-id-prop\">\n```\n\nℹ️ [Test id](https:\u002F\u002Ftesting-library.com\u002Fdocs\u002Fqueries\u002Fbytestid\u002F) can be used to narrow selection when unit testing.\n\u003C!-- Group:description:end -->\n\n#### Required props\n\n\u003C!-- Group:required-props:begin -->\nNone\n\u003C!-- Group:required-props:end -->\n\n#### Optional props\n\n\u003C!-- Group:optional-props:begin -->\n\n\u003Ctable>\n  \u003Cthead>\n    \u003Ctr>\n      \u003Cth>Name\u003C\u002Fth>\n      \u003Cth>Description\u003C\u002Fth>\n    \u003C\u002Ftr>\n  \u003C\u002Fthead>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd>className\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>CSS class name.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>id\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Uniquely identifies this group within an application.\nFalls back to \u003Ccode>useId\u003C\u002Fcode> when not provided.\u003C\u002Fp>\n\u003Cp>ℹ️ This value will also be assigned to the \u003Ccode>data-group\u003C\u002Fcode> attribute.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>style\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>CSS properties.\u003C\u002Fp>\n\u003Cp>⚠️ The following styles cannot be overridden: \u003Ccode>display\u003C\u002Fcode>, \u003Ccode>flex-direction\u003C\u002Fcode>, \u003Ccode>flex-wrap\u003C\u002Fcode>, and \u003Ccode>overflow\u003C\u002Fcode>.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>children\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Panel and Separator components that comprise this group.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>defaultLayout\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Default layout for the Group.\u003C\u002Fp>\n\u003Cp>ℹ️ This value allows layouts to be remembered between page reloads.\u003C\u002Fp>\n\u003Cp>⚠️ Slight layout shift may occur when server-rendering panels with percentage-based default sizes.\nRefer to the documentation for suggestions on how to minimize the impact of this.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>disableCursor\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>This library sets custom mouse cursor styles to indicate drag state.\nUse this prop to disable that behavior for Panels and Separators in this group.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>disabled\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Disable resize functionality.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>elementRef\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Ref attached to the root \u003Ccode>HTMLDivElement\u003C\u002Fcode>.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>groupRef\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Exposes the following imperative API:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>getLayout(): Layout\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>\u003Ccode>setLayout(layout: Layout): void\u003C\u002Fcode>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>ℹ️ The \u003Ccode>useGroupRef\u003C\u002Fcode> and \u003Ccode>useGroupCallbackRef\u003C\u002Fcode> hooks are exported for convenience use in TypeScript projects.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>onLayoutChange\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Called when the Group's layout is changing.\u003C\u002Fp>\n\u003Cp>⚠️ For layout changes caused by pointer events, this method is called each time the pointer is moved.\nFor most cases, it is recommended to use the \u003Ccode>onLayoutChanged\u003C\u002Fcode> callback instead.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>onLayoutChanged\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Called after the Group's layout has  been changed.\u003C\u002Fp>\n\u003Cp>ℹ️ For layout changes caused by pointer events, this method is not called until the pointer has been released.\nThis method is recommended when saving layouts to some storage api.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>resizeTargetMinimumSize\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Minimum size of the resizable hit target area (either \u003Ccode>Separator\u003C\u002Fcode> or \u003Ccode>Panel\u003C\u002Fcode> edge)\nThis threshold ensures are large enough to avoid mis-clicks.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Coarse inputs (typically a finger on a touchscreen) have reduced accuracy;\nto ensure accessibility and ease of use, hit targets should be larger to prevent mis-clicks.\u003C\u002Fli>\n\u003Cli>Fine inputs (typically a mouse) can be smaller\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>ℹ️ \u003Ca href=\"https:\u002F\u002Fdeveloper.apple.com\u002Fdesign\u002Fhuman-interface-guidelines\u002Faccessibility\">Apple interface guidelines\u003C\u002Fa> suggest \u003Ccode>20pt\u003C\u002Fcode> (\u003Ccode>27px\u003C\u002Fcode>) on desktops and \u003Ccode>28pt\u003C\u002Fcode> (\u003Ccode>37px\u003C\u002Fcode>) for touch devices\nIn practice this seems to be much larger than many of their own applications use though.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>orientation\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Specifies the resizable orientation ("horizontal" or "vertical"); defaults to "horizontal"\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>\n\n\u003C!-- Group:optional-props:end -->\n\n### Panel\n\n\u003C!-- Panel:description:begin -->\nA Panel wraps resizable content and can be configured with min\u002Fmax size constraints and collapsible behavior.\n\nPanel size props can be in the following formats:\n- Percentage of the parent Group (0..100)\n- Pixels\n- Relative font units (em, rem)\n- Viewport relative units (vh, vw)\n\nℹ️ Numeric values are assumed to be pixels.\nStrings without explicit units are assumed to be percentages (0%..100%).\nPercentages may also be specified as strings ending with \"%\" (e.g. \"33%\")\nPixels may also be specified as strings ending with the unit \"px\".\nOther units should be specified as strings ending with their CSS property units (e.g. 1rem, 50vh)\n\nPanel elements always include the following attributes:\n\n```html\n\u003Cdiv data-panel data-testid=\"panel-id-prop\" id=\"panel-id-prop\">\n```\n\nℹ️ [Test id](https:\u002F\u002Ftesting-library.com\u002Fdocs\u002Fqueries\u002Fbytestid\u002F) can be used to narrow selection when unit testing.\n\n⚠️ Panel elements must be direct DOM children of their parent Group elements.\n\u003C!-- Panel:description:end -->\n\n#### Required props\n\n\u003C!-- Panel:required-props:begin -->\nNone\n\u003C!-- Panel:required-props:end -->\n\n#### Optional props\n\n\u003C!-- Panel:optional-props:begin -->\n\n\u003Ctable>\n  \u003Cthead>\n    \u003Ctr>\n      \u003Cth>Name\u003C\u002Fth>\n      \u003Cth>Description\u003C\u002Fth>\n    \u003C\u002Ftr>\n  \u003C\u002Fthead>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd>className\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>CSS class name.\u003C\u002Fp>\n\u003Cp>⚠️ Class is applied to nested \u003Ccode>HTMLDivElement\u003C\u002Fcode> to avoid styles that interfere with Flex layout.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>id\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Uniquely identifies this panel within the parent group.\nFalls back to \u003Ccode>useId\u003C\u002Fcode> when not provided.\u003C\u002Fp>\n\u003Cp>ℹ️ This prop is used to associate persisted group layouts with the original panel.\u003C\u002Fp>\n\u003Cp>ℹ️ This value will also be assigned to the \u003Ccode>data-panel\u003C\u002Fcode> attribute.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>style\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>CSS properties.\u003C\u002Fp>\n\u003Cp>⚠️ Style is applied to nested \u003Ccode>HTMLDivElement\u003C\u002Fcode> to avoid styles that interfere with Flex layout.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>collapsedSize\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Panel size when collapsed; defaults to 0%.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>collapsible\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>This panel can be collapsed.\u003C\u002Fp>\n\u003Cp>ℹ️ A collapsible panel will collapse when it's size is less than of the specified \u003Ccode>minSize\u003C\u002Fcode>\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>defaultSize\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Default size of Panel within its parent group; default is auto-assigned based on the total number of Panels.\u003C\u002Fp>\n\u003Cp>⚠️ Percentage based sizes may cause slight layout shift when server-rendering.\nFor more information see the documentation.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>disabled\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>When disabled, a panel cannot be resized either directly or indirectly (by resizing another panel).\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>elementRef\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Ref attached to the root \u003Ccode>HTMLDivElement\u003C\u002Fcode>.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>groupResizeBehavior\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>How should this Panel behave if the parent Group is resized?\nDefaults to \u003Ccode>preserve-relative-size\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>preserve-relative-size\u003C\u002Fcode>: Retain the current relative size (as a percentage of the Group)\u003C\u002Fli>\n\u003Cli>\u003Ccode>preserve-pixel-size\u003C\u002Fcode>: Retain its current size (in pixels)\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>ℹ️ Panel min\u002Fmax size constraints may impact this behavior.\u003C\u002Fp>\n\u003Cp>⚠️ A Group must contain at least one Panel with \u003Ccode>preserve-relative-size\u003C\u002Fcode> resize behavior.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>maxSize\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Maximum size of Panel within its parent group; defaults to 100%.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>minSize\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Minimum size of Panel within its parent group; defaults to 0%.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>onResize\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Called when panel sizes change.\n@param panelSize Panel size (both as a percentage of the parent Group and in pixels)\n@param id Panel id (if one was provided as a prop)\n@param prevPanelSize Previous panel size (will be undefined on mount)\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>panelRef\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Exposes the following imperative API:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>collapse(): void\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>\u003Ccode>expand(): void\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>\u003Ccode>getSize(): number\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>\u003Ccode>isCollapsed(): boolean\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>\u003Ccode>resize(size: number): void\u003C\u002Fcode>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>ℹ️ The \u003Ccode>usePanelRef\u003C\u002Fcode> and \u003Ccode>usePanelCallbackRef\u003C\u002Fcode> hooks are exported for convenience use in TypeScript projects.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>\n\n\u003C!-- Panel:optional-props:end -->\n\n### Separator\n\n\u003C!-- Separator:description:begin -->\nSeparators are not _required_ but they are _recommended_ as they improve keyboard accessibility.\n\n⚠️ Separator elements must be direct DOM children of their parent Group elements.\n\nSeparator elements always include the following attributes:\n\n```html\n\u003Cdiv data-separator data-testid=\"separator-id-prop\" id=\"separator-id-prop\" role=\"separator\">\n```\n\nℹ️ [Test id](https:\u002F\u002Ftesting-library.com\u002Fdocs\u002Fqueries\u002Fbytestid\u002F) can be used to narrow selection when unit testing.\n\nℹ️ In addition to the attributes shown above, separator also renders all required [WAI-ARIA properties](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAccessibility\u002FARIA\u002FReference\u002FRoles\u002Fseparator_role#associated_wai-aria_roles_states_and_properties).\n\u003C!-- Separator:description:end -->\n\n#### Required props\n\n\u003C!-- Separator:required-props:begin -->\nNone\n\u003C!-- Separator:required-props:end -->\n\n#### Optional props\n\n\u003C!-- Separator:optional-props:begin -->\n\n\u003Ctable>\n  \u003Cthead>\n    \u003Ctr>\n      \u003Cth>Name\u003C\u002Fth>\n      \u003Cth>Description\u003C\u002Fth>\n    \u003C\u002Ftr>\n  \u003C\u002Fthead>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd>className\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>CSS class name.\u003C\u002Fp>\n\u003Cp>ℹ️ Use the \u003Ccode>data-separator\u003C\u002Fcode> attribute for custom \u003Cem>hover\u003C\u002Fem> and \u003Cem>active\u003C\u002Fem> styles\u003C\u002Fp>\n\u003Cp>⚠️ The following properties cannot be overridden: \u003Ccode>flex-grow\u003C\u002Fcode>, \u003Ccode>flex-shrink\u003C\u002Fcode>\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>id\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Uniquely identifies the separator within the parent group.\nFalls back to \u003Ccode>useId\u003C\u002Fcode> when not provided.\u003C\u002Fp>\n\u003Cp>ℹ️ This value will also be assigned to the \u003Ccode>data-separator\u003C\u002Fcode> attribute.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>style\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>CSS properties.\u003C\u002Fp>\n\u003Cp>ℹ️ Use the \u003Ccode>data-separator\u003C\u002Fcode> attribute for custom \u003Cem>hover\u003C\u002Fem> and \u003Cem>active\u003C\u002Fem> styles\u003C\u002Fp>\n\u003Cp>⚠️ The following properties cannot be overridden: \u003Ccode>flex-grow\u003C\u002Fcode>, \u003Ccode>flex-shrink\u003C\u002Fcode>\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>disabled\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>When disabled, the separator cannot be used to resize its neighboring panels.\u003C\u002Fp>\n\u003Cp>ℹ️ The panels may still be resized indirectly (while other panels are being resized).\nTo prevent a panel from being resized at all, it needs to also be disabled.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>disableDoubleClick\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>When true, double-clicking this \u003Ccode>Separator\u003C\u002Fcode> will not reset its \u003Ccode>Panel\u003C\u002Fcode> to its default size.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>elementRef\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Ref attached to the root \u003Ccode>HTMLDivElement\u003C\u002Fcode>.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>\n\n\u003C!-- Separator:optional-props:end -->\n","`react-resizable-panels` 是一个用于创建可调整大小的面板组\u002F布局的 React 组件库。其核心功能包括支持水平和垂直方向上的面板尺寸调整，同时提供了丰富的自定义选项如CSS类名、样式及默认布局等，以满足不同设计需求。该组件库采用 TypeScript 编写，确保了类型安全，并且内置了对测试友好的属性如 `data-testid`。适用于需要灵活界面布局的应用场景，比如代码编辑器、仪表盘或任何需要用户自定义界面空间分配的网页应用中。",2,"2026-06-11 03:37:37","high_star"]