- Notifications
You must be signed in to change notification settings - Fork0
A resizable and collapsible layout component for React, built with react-resizable-panels. It's designed to provide a smooth, persistent, and SSR-friendly user experience.
License
htetaunglin-coder/react-resizable-layout
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A resizable and collapsible layout component for React, built withreact-resizable-panels. It's designed to provide a smooth, persistent, and SSR-friendly user experience.
- SSR-Friendly: Built with server-side rendering in mind to prevent layout shifts and hydration mismatches.
- Persistent State: Remembers panel sizes and their collapsed/expanded state by saving them to cookies.
- Collapsible Panels: Allows users to toggle panels open or closed with ease.
- Simple API: Provides a straightforward API for controlling panels from anywhere in your application.
- Smooth Animations: Includes clean transitions for resizing and collapsing panels.
You can add this component to your project using theshadcn/ui CLI:
pnpm dlx shadcn@latest add https://react-animated-resizable-layout.vercel.app/registry/resizable-layout.json
For other package managers, simply replacepnpm withnpx,yarn, orbunx.
For manual installation instructions, please refer to theofficial documentation.
Here is a basic example of how to implement a server-rendered resizable layout.
import{ResizableLayoutContent,ResizableLayoutGroup,ResizableLayoutPanel,ResizableLayoutProvider,ResizableLayoutTrigger,}from"@/components/resizable-layout"import{getServerSideResizableLayoutCookieData}from"@/components/resizable-layout/server-utils"// Define unique IDs for your panelsconstLEFT_PANEL_ID="left-panel"constRIGHT_PANEL_ID="right-panel"exportdefaultasyncfunctionMyPage(){// 1. Read layout data from cookies on the server to prevent FOUC.const{states:defaultState,sizes:defaultLayout}=awaitgetServerSideResizableLayoutCookieData({states:{[LEFT_PANEL_ID]:true,// Left panel starts open[RIGHT_PANEL_ID]:false,// Right panel starts closed},// Corresponds to [left, content, right]sizes:[25,75,0],})return(// 2. Wrap your layout with the provider to manage state.<ResizableLayoutProviderinitialState={defaultState}><ResizableLayoutGroupdirection="horizontal"// 3. Pass the saved sizes to the group for persistence.defaultLayout={defaultLayout}>{/* Left Panel */}<ResizableLayoutPanelid={LEFT_PANEL_ID}side="left"defaultSize={25}><divclassName="p-4"><h2className="font-semibold">Left Panel</h2></div></ResizableLayoutPanel>{/* Main Content */}<ResizableLayoutContent><divclassName="flex flex-col items-center gap-4 p-4"><h1className="text-xl font-bold">Main Content</h1><divclassName="flex gap-2"><ResizableLayoutTriggerid={LEFT_PANEL_ID}/><ResizableLayoutTriggerid={RIGHT_PANEL_ID}/></div></div></ResizableLayoutContent>{/* Right Panel */}<ResizableLayoutPanelid={RIGHT_PANEL_ID}side="right"defaultSize={25}><divclassName="p-4"><h2className="font-semibold">Right Panel</h2></div></ResizableLayoutPanel></ResizableLayoutGroup></ResizableLayoutProvider>)}
For detailed component APIs, examples, and advanced usage, please visit thefull documentation.
This project is open source and contributions are welcome. If you have an issue, question, or pull request, please feel free to open one.
This project is licensed under theMIT License.
About
A resizable and collapsible layout component for React, built with react-resizable-panels. It's designed to provide a smooth, persistent, and SSR-friendly user experience.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.