{"id":16681488,"url":"https://github.com/hlorenzi/react-dockable","last_synced_at":"2025-10-20T06:02:11.128Z","repository":{"id":45432969,"uuid":"420561790","full_name":"hlorenzi/react-dockable","owner":"hlorenzi","description":"An easy-to-use dockable window manager for React, fully embracing hooks! -- https://hlorenzi.github.io/react-dockable/","archived":false,"fork":false,"pushed_at":"2021-12-14T09:22:48.000Z","size":2728,"stargazers_count":23,"open_issues_count":5,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-18T03:35:36.951Z","etag":null,"topics":["component","dock","dockable","drag-and-drop","gutter","layout","panel","popout","react","react-hooks","resizeable","slider","tabs","typescript","typescript-library","window","windowing"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hlorenzi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"patreon":"hlorenzi","ko_fi":"hlorenzi"}},"created_at":"2021-10-24T01:37:28.000Z","updated_at":"2024-12-18T15:22:18.000Z","dependencies_parsed_at":"2022-08-23T04:11:10.188Z","dependency_job_id":null,"html_url":"https://github.com/hlorenzi/react-dockable","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/hlorenzi%2Freact-dockable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hlorenzi%2Freact-dockable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hlorenzi%2Freact-dockable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hlorenzi%2Freact-dockable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hlorenzi","download_url":"https://codeload.github.com/hlorenzi/react-dockable/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244849013,"owners_count":20520626,"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":["component","dock","dockable","drag-and-drop","gutter","layout","panel","popout","react","react-hooks","resizeable","slider","tabs","typescript","typescript-library","window","windowing"],"created_at":"2024-10-12T14:04:23.088Z","updated_at":"2025-10-20T06:02:11.004Z","avatar_url":"https://github.com/hlorenzi.png","language":"TypeScript","funding_links":["https://patreon.com/hlorenzi","https://ko-fi.com/hlorenzi"],"categories":[],"sub_categories":[],"readme":"# react-dockable\n\n![react-dockable example video](example.gif)\n\nAn easy-to-use dockable window manager for React,\nfully embracing hooks!\n\n[Try it right now!](https://hlorenzi.github.io/react-dockable/)\n\nYour custom content's lifecycle hooks are respected,\nso `useState`, `useEffect`, etc. work out of the box,\nand state carries over even if the user rearranges\ntheir panels.\n\n[![npm][badge-npm-img]][badge-npm-url]\n\n[![Discord][badge-discord-img]][badge-discord-url]\n\n[badge-discord-img]: https://img.shields.io/discord/394999035540275222?label=Join%20the%20Discord%20server!\u0026logo=discord\n[badge-discord-url]: https://discord.com/invite/pXeDXGD\n\n[badge-npm-img]: https://img.shields.io/npm/v/@hlorenzi/react-dockable\n[badge-npm-url]: https://www.npmjs.com/package/@hlorenzi/react-dockable\n\n## Installation\n\n```\nnpm install @hlorenzi/react-dockable\n```\n\n## Example\n\n```tsx\nimport * as React from \"react\"\nimport * as Dockable from \"@hlorenzi/react-dockable\"\n\nfunction App()\n{\n    // Create the base state,\n    // and set up initial content\n    const state = Dockable.useDockable((state) =\u003e\n    {\n        Dockable.createDockedPanel(\n            state, state.rootPanel, Dockable.DockMode.Full,\n            \u003cCounter/\u003e)\n    })\n\n    // Render the root Container element,\n    // which handles all interactions on your behalf\n    return \u003cdiv style={{\n        width: \"100vw\",\n        height: \"100vh\",\n    }}\u003e\n\n        \u003cDockable.Container state={ state }/\u003e\n\n    \u003c/div\u003e\n}\n\n// Your custom element!\nfunction Counter()\n{\n    const [value, setValue] = React.useState(0)\n    const countUp = () =\u003e setValue(value + 1)\n\n    const ctx = Dockable.useContentContext()\n    ctx.setTitle(`Count: ${ value }`)\n    ctx.setPreferredSize(300, 250)\n\n    return \u003cdiv\u003e\n        { value }\n        \u003cbutton onClick={ countUp }\u003eCount up!\u003c/button\u003e\n    \u003c/div\u003e\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhlorenzi%2Freact-dockable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhlorenzi%2Freact-dockable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhlorenzi%2Freact-dockable/lists"}