{"id":15988472,"url":"https://github.com/insertish/overlapping-panels","last_synced_at":"2025-03-17T20:30:20.736Z","repository":{"id":110114672,"uuid":"451242526","full_name":"insertish/overlapping-panels","owner":"insertish","description":"Gestures-driven navigation UI for React.js","archived":false,"fork":false,"pushed_at":"2022-01-23T22:05:02.000Z","size":240,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-28T03:39:46.538Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/insertish.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2022-01-23T22:04:17.000Z","updated_at":"2024-05-16T14:35:03.000Z","dependencies_parsed_at":"2023-03-13T23:48:08.714Z","dependency_job_id":null,"html_url":"https://github.com/insertish/overlapping-panels","commit_stats":{"total_commits":21,"total_committers":1,"mean_commits":21.0,"dds":0.0,"last_synced_commit":"a5ec86305387a7c6f87984da2489550a2111d4ac"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insertish%2Foverlapping-panels","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insertish%2Foverlapping-panels/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insertish%2Foverlapping-panels/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insertish%2Foverlapping-panels/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/insertish","download_url":"https://codeload.github.com/insertish/overlapping-panels/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243878483,"owners_count":20362433,"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":[],"created_at":"2024-10-08T04:04:18.741Z","updated_at":"2025-03-17T20:30:20.731Z","avatar_url":"https://github.com/insertish.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Overlapping Panels\n\n\u003e Gestures-driven navigation UI for React.js\n\n[![NPM](https://img.shields.io/npm/v/react-overlapping-panels.svg)](https://www.npmjs.com/package/react-overlapping-panels)\n\nThis is a Javascript / React implementation of Discord's [OverlappingPanels](https://github.com/discord/OverlappingPanels).\n\nGesture-based navigation allows us to create more natural interactions and avoids conflict with native gesture navigation.\n\nThe current implementation relies almost entirely on CSS, inspired by [bree](https://bree.dev)'s [css-drawer-snap](https://github.com/Brecert/css-drawer-snap). By using CSS scroll snap we rely on the browser to resolve which scrollbar should be scrolled at what time, so you avoid sidebars opening when scrolling vertically through something such as messages or when scrolling sideways through another element.\n\n## Install\n\n```bash\nnpm install --save react-overlapping-panels\n```\n\n```bash\nyarn add react-overlapping-panels\n```\n\n## Usage\n\n```tsx\nimport React, { Component } from 'react'\n\nimport { OverlappingPanels, ShowIf } from 'react-overlapping-panels'\nimport 'react-overlapping-panels/dist/index.css'\n\nfunction MyComponent() {\n    return (\n        \u003cOverlappingPanels\n            width={720}\n            height={640}\n            leftPanel={{\n                component: \u003cspan\u003eI am the left panel.\u003c/span\u003e,\n                width: 300\n            }}\n            rightPanel={{\n                component: \u003cspan\u003eI am the right panel.\u003c/span\u003e,\n                width: 250\n            }}\n            bottomNav={{\n                component: \u003cspan\u003ehello!\u003c/span\u003e,\n                height: 40,\n                showIf: ShowIf.Left\n            }}\u003e\n            \u003ch1\u003emain content!\u003c/h1\u003e\n        \u003c/OverlappingPanels\u003e\n    )\n}\n\n// See example/src/App.tsx for more working examples.\n```\n\n## Develop Locally\n\nClone the project using:\n\n```bash\ngit clone https://gitlab.insrt.uk/insert/overlapping-panels\n```\n\nBuild and watch files for the library:\n\n```bash\nyarn start\n```\n\nAnd build and watch files for the example:\n\n```bash\ncd example\nyarn start\n```\n\n## To-Do\n\n- Add RTL support.\n\n## Preview\n\nExample (REVOLT PWA): https://autumn.revolt.chat/attachments/GBokkPYJIJqsaXKndNZPkr2xD5H33t5QVAYKsRCqRc/simplescreenrecorder-2021-06-14_14.42.20.mp4\n\n(The following ones are a bit choppy since I recorded them with Peek instead of SSR)\n\nExample in REVOLT: https://autumn.revolt.chat/attachments/ypmI99sJqyeBEt5LI3dNXSE5WIUPlg1kp4XY7NAbnq/Peek%202021-06-14%2013-32.webm\nDemo taken from examples: https://autumn.revolt.chat/attachments/soJ5hEJYW2vG2kpxlrE98BI8aZu0NY8FMHeYAfL1kH/Peek%202021-06-14%2014-22.webm\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finsertish%2Foverlapping-panels","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finsertish%2Foverlapping-panels","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finsertish%2Foverlapping-panels/lists"}