{"id":13534239,"url":"https://github.com/ticlo/rc-dock","last_synced_at":"2025-05-14T15:06:03.690Z","repository":{"id":34293786,"uuid":"174296917","full_name":"ticlo/rc-dock","owner":"ticlo","description":"Dock Layout for React Component","archived":false,"fork":false,"pushed_at":"2025-04-30T02:18:51.000Z","size":5531,"stargazers_count":735,"open_issues_count":50,"forks_count":99,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-04-30T03:25:25.371Z","etag":null,"topics":["dock","drag","drag-and-drop","drop","layout","panel","react","react-dom","reactjs","tabs"],"latest_commit_sha":null,"homepage":"https://ticlo.github.io/rc-dock/examples","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ticlo.png","metadata":{"files":{"readme":"README.md","changelog":"HISTORY.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"patreon":"ticlo","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-03-07T07:48:48.000Z","updated_at":"2025-04-23T01:22:02.000Z","dependencies_parsed_at":"2024-03-06T17:04:50.740Z","dependency_job_id":"6a2dd628-575c-4658-bce5-b204f4feeabf","html_url":"https://github.com/ticlo/rc-dock","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ticlo%2Frc-dock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ticlo%2Frc-dock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ticlo%2Frc-dock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ticlo%2Frc-dock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ticlo","download_url":"https://codeload.github.com/ticlo/rc-dock/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254169011,"owners_count":22026207,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dock","drag","drag-and-drop","drop","layout","panel","react","react-dom","reactjs","tabs"],"created_at":"2024-08-01T07:01:28.684Z","updated_at":"2025-05-14T15:06:03.684Z","avatar_url":"https://github.com/ticlo.png","language":"JavaScript","readme":"# Dock Layout for React Component\n\n![](https://ticlo.github.io/rc-dock/images/demo.gif)\n\n#### Popup panel as new browser window\n![](https://ticlo.github.io/rc-dock/images/new-window.gif)\n\n#### Dark Theme\n![](https://ticlo.github.io/rc-dock/images/dark-theme.png)\n\n- **Examples:** https://ticlo.github.io/rc-dock/examples\n- **Docs:** https://ticlo.github.io/rc-dock\n- **Discord:** [![Discord](https://img.shields.io/discord/434106806503997445.svg?color=7289DA\u0026logo=discord\u0026logoColor=white\n)](https://discord.gg/G7pw9DR)\n\n## Usage\n\n[![rc-tabs](https://nodei.co/npm/rc-dock.png)](https://npmjs.org/package/rc-dock)\n\n```jsx\nimport DockLayout from 'rc-dock'\nimport \"rc-dock/dist/rc-dock.css\";\n\n...\n\ndefaultLayout = {\n  dockbox: {\n    mode: 'horizontal',\n    children: [\n      {\n        tabs: [\n          {id: 'tab1', title: 'tab1', content: \u003cdiv\u003eHello World\u003c/div\u003e}\n        ]\n      }\n    ]\n  }\n};\n\nrender() {\n  return (\n    \u003cDockLayout\n      defaultLayout={defaultLayout}\n      style={{\n        position: \"absolute\",\n        left: 10,\n        top: 10,\n        right: 10,\n        bottom: 10,\n      }}\n    /\u003e\n  )\n}\n\n```\n- use as **uncontrolled layout**\n  - set layout object in **[DockLayout.defaultLayout](https://ticlo.github.io/rc-dock/interfaces/docklayout.layoutprops.html#defaultlayout)**\n- use as **controlled layout**\n  - set layout object in **[DockLayout.layout](https://ticlo.github.io/rc-dock/interfaces/docklayout.layoutprops.html#layout)** \n\n\n## types\n\n\n### LayoutData [🗎](https://ticlo.github.io/rc-dock/interfaces/dockdata.layoutdata.html)\n| Property | Type | Comments | Default |\n| :---: | :---: | :---: | :---: |\n| dockbox | BoxData | main dock box | empty BoxData |\n| floatbox | BoxData | main float box, children can only be PanelData  | empty BoxData |\n\n### BoxData [🗎](https://ticlo.github.io/rc-dock/interfaces/dockdata.boxdata.html)\na box is the layout element that contains other boxes or panels\n\n| Property | Type | Comments | Default |\n| :---: | :---: | :---: | :---: |\n| mode | 'horizontal' \u0026#x7c; 'vertical' \u0026#x7c; 'float' | layout mode of the box | |\n| children | (BoxData \u0026#x7c; PanelData)[] | children boxes or panels | **required** |\n\n### PanelData [🗎](https://ticlo.github.io/rc-dock/interfaces/dockdata.paneldata.html)\na panel is a visiaul container with tabs button in the title bar\n\n| Property | Type | Comments | Default |\n| :---: | :---: | :---: | :---: |\n| tabs | TabData[] | children tabs | **required** |\n| panelLock | PanelLock | addition information of a panel, this prevents the panel from being removed when there is no tab inside, a locked panel can not be moved to float layer either | |\n\n\n### TabData [🗎](https://ticlo.github.io/rc-dock/interfaces/dockdata.tabdata.html)\n| Property | Type | Comments | Default |\n| :---: | :---: | :---: | :---: |\n| id | string | unique id | **required** |\n| title | string \u0026#x7c; ReactElement | tab title | **required** |\n| content | ReactElement \u0026#x7c; (tab: TabData) =\u003e ReactElement | tab content | **required** |\n| closable | bool | whether tab can be closed | false |\n| group | string | tabs with different tab group can not be put in same panel, more options for the group can be defined as TabGroup in DefaultLayout.groups | |\n\n## DockLayout API\n\nget the `ref` of the DockLayout component to use the following API\n\n### saveLayout [🗎](https://ticlo.github.io/rc-dock/interfaces/docklayout.layoutprops.html)\nsave layout\n\n```typescript\nsaveLayout(): SavedLayout \n```\n\n### loadLayout [🗎](https://ticlo.github.io/rc-dock/interfaces/docklayout.layoutprops.html)\nload layout\n\n```typescript\n loadLayout(savedLayout: SavedLayout): void\n```\n\n### dockMove [🗎](https://ticlo.github.io/rc-dock/classes/docklayout.docklayout-1.html#dockmove)\nmove a tab or a panel, if source is already in the layout, you can use the find method to get it with id first\n\n```typescript\ndockMove(source: TabData | PanelData, target: string | TabData | PanelData | BoxData, direction: DropDirection): void;\n```\n\n### find [🗎](https://ticlo.github.io/rc-dock/classes/docklayout.docklayout-1.html#find)\nfind PanelData or TabData by id\n\n```typescript\nfind(id: string | ((item: PanelData | TabData | BoxData) =\u003e boolean), filter?: Filter): PanelData | TabData | BoxData | undefined;\n```\n\n### updateTab [🗎](https://ticlo.github.io/rc-dock/classes/docklayout.docklayout-1.html#updatetab)\nupdate a tab with new TabData\n\nreturns false if the tab is not found\n\n```typescript\nupdateTab(id: string, newTab: TabData): boolean;\n```\n","funding_links":["https://patreon.com/ticlo"],"categories":["Libraries"],"sub_categories":["JavaScript"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fticlo%2Frc-dock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fticlo%2Frc-dock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fticlo%2Frc-dock/lists"}