{"id":29098280,"url":"https://github.com/DimitryDushkin/sliding-pane","last_synced_at":"2025-06-28T14:38:20.569Z","repository":{"id":15369530,"uuid":"77935288","full_name":"DimitryDushkin/sliding-pane","owner":"DimitryDushkin","description":"Pane that slides out of the window side","archived":false,"fork":false,"pushed_at":"2023-10-20T07:28:17.000Z","size":6102,"stargazers_count":146,"open_issues_count":8,"forks_count":53,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-09T21:48:01.844Z","etag":null,"topics":["pane","popup","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DimitryDushkin.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"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}},"created_at":"2017-01-03T16:46:16.000Z","updated_at":"2025-02-23T19:06:44.000Z","dependencies_parsed_at":"2024-06-18T13:46:33.700Z","dependency_job_id":"1f15f5c2-b576-4757-bcbe-ab9965111a18","html_url":"https://github.com/DimitryDushkin/sliding-pane","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"purl":"pkg:github/DimitryDushkin/sliding-pane","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DimitryDushkin%2Fsliding-pane","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DimitryDushkin%2Fsliding-pane/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DimitryDushkin%2Fsliding-pane/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DimitryDushkin%2Fsliding-pane/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DimitryDushkin","download_url":"https://codeload.github.com/DimitryDushkin/sliding-pane/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DimitryDushkin%2Fsliding-pane/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260282855,"owners_count":22985838,"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":["pane","popup","react"],"created_at":"2025-06-28T14:38:14.874Z","updated_at":"2025-06-28T14:38:20.557Z","avatar_url":"https://github.com/DimitryDushkin.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"## React Sliding Pane\n\nPane that slides out of the window side. Like panes from Google Tag Manager.\n\nFeatures:\n\n- Animated open-close\n- Smooth animation based on CSS translate\n- Outside click or left top arrow click to close\n- Efficient: pane content is not rendered when pane is closed\n- Based on react-modal\n- Close on escape support\n- Typescript support\n- Runtime props validation in dev via \"prop-types\"\n- React [Strict mode](https://reactjs.org/docs/strict-mode.html) covered\n- Small — 8 Kb gzip (react-sliding-pane + react-modal as dependency)\n\nSee [changelog](https://github.com/DimitryDushkin/sliding-pane/blob/master/CHANGELOG.md).\n\n[![npm version](https://badgen.net/npm/v/react-sliding-pane?color=green\u0026label=npm%20package)](https://www.npmjs.com/package/react-sliding-pane)\n[![downloads per week](https://badgen.net/npm/dw/react-sliding-pane)](https://www.npmjs.com/package/react-sliding-pane)\n[![bundle size](https://badgen.net/bundlephobia/minzip/react-sliding-pane)](https://bundlephobia.com/result?p=react-sliding-pane)\n\n\u003ca href=\"https://www.browserstack.com/\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/DimitryDushkin/sliding-pane/master/docs/browserstack-logo.png\" width=\"300\" title=\"Thanks to BrowserStack\" /\u003e\n\u003c/a\u003e\n\nThanks BrowserStack for support!\n\n### Table of contents\n\n- [Example](#example)\n- [When to use (UX)](#when-to-use-ux)\n- [How to use](#how-to-use)\n- [Properties](#properties)\n- [How to develop](#how-to-develop)\n\n### Example\n\n[Try example](https://dimitrydushkin.github.io/sliding-pane/example.html)\n\n\u003ca href=\"https://dimitrydushkin.github.io/sliding-pane/example.html\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/DimitryDushkin/sliding-pane/master/docs/react-sliding-pane-screenshot.png\" width=\"600\" /\u003e\n\u003c/a\u003e\n\n### When to use (UX)\n\nI've found sliding pane very helpful in situations when normal modal window (or just popup) is not enough: long list with pagination, multi-step form or nested popups.\n\n### How to use\n\nInstall module and peer dependencies:\n\n`npm i --save react react-dom react-sliding-pane`\n\n```js\nimport React, { Component, useState } from \"react\";\nimport { render } from \"react-dom\";\nimport SlidingPane from \"react-sliding-pane\";\nimport \"react-sliding-pane/dist/react-sliding-pane.css\";\n\nconst App = () =\u003e {\n  const [state, setState] = useState({\n    isPaneOpen: false,\n    isPaneOpenLeft: false,\n  });\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={() =\u003e setState({ isPaneOpen: true })}\u003e\n        Click me to open right pane!\n      \u003c/button\u003e\n      \u003cdiv style={{ marginTop: \"32px\" }}\u003e\n        \u003cbutton onClick={() =\u003e setState({ isPaneOpenLeft: true })}\u003e\n          Click me to open left pane with 20% width!\n        \u003c/button\u003e\n      \u003c/div\u003e\n      \u003cSlidingPane\n        className=\"some-custom-class\"\n        overlayClassName=\"some-custom-overlay-class\"\n        isOpen={state.isPaneOpen}\n        title=\"Hey, it is optional pane title.  I can be React component too.\"\n        subtitle=\"Optional subtitle.\"\n        onRequestClose={() =\u003e {\n          // triggered on \"\u003c\" on left top click or on outside click\n          setState({ isPaneOpen: false });\n        }}\n      \u003e\n        \u003cdiv\u003eAnd I am pane content. BTW, what rocks?\u003c/div\u003e\n        \u003cbr /\u003e\n        \u003cimg src=\"img.png\" /\u003e\n      \u003c/SlidingPane\u003e\n      \u003cSlidingPane\n        closeIcon={\u003cdiv\u003eSome div containing custom close icon.\u003c/div\u003e}\n        isOpen={state.isPaneOpenLeft}\n        title=\"Hey, it is optional pane title.  I can be React component too.\"\n        from=\"left\"\n        width=\"200px\"\n        onRequestClose={() =\u003e setState({ isPaneOpenLeft: false })}\n      \u003e\n        \u003cdiv\u003eAnd I am pane content on left.\u003c/div\u003e\n      \u003c/SlidingPane\u003e\n    \u003c/div\u003e\n  );\n};\n\nrender(\u003cApp /\u003e, document.getElementById(\"app\"));\n```\n\n### Properties\n\n| Prop             | Required | Default |                                Description |\n| ---------------- | :------: | ------: | -----------------------------------------: |\n| isOpen           |    ✅    |         |                               Is pane open |\n| title            |          |         |                            Title in header |\n| subtitle         |          |         |                         Subtitle in header |\n| from             |          | \"right\" |            Direction from pane will appear |\n| children         |          |         |                            Content of pane |\n| className        |          |         |            CSS class name. See react-modal |\n| overlayClassName |          |         | CSS class name of overlay. See react-modal |\n| width            |          |         |                 CSS string for width pane. |\n| closeIcon        |          |         |                          Custom close icon |\n| shouldCloseOnEsc |          |         |                   Enable pane close on ESC |\n| hideHeader       |          |         |                           Hide pane header |\n| onRequestClose   |    ✅    |         |                 Called on close icon press |\n| onAfterOpen      |          |         |                          Called after open |\n\n### How to develop\n\n```\nnpm run docs\nopen docs/example.html\n```\n\n### How to release\n```\nnpm ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDimitryDushkin%2Fsliding-pane","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDimitryDushkin%2Fsliding-pane","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDimitryDushkin%2Fsliding-pane/lists"}