{"id":18326446,"url":"https://github.com/limoer96/resize-draggable","last_synced_at":"2025-09-13T13:14:14.291Z","repository":{"id":44084769,"uuid":"201869854","full_name":"Limoer96/resize-draggable","owner":"Limoer96","description":"A React component that can be used for sizing by dragging.","archived":false,"fork":false,"pushed_at":"2023-01-04T06:58:34.000Z","size":4038,"stargazers_count":0,"open_issues_count":18,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-10T21:29:13.571Z","etag":null,"topics":["component","draggable-elements","resizer"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/Limoer96.png","metadata":{"files":{"readme":"README-en.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}},"created_at":"2019-08-12T06:21:27.000Z","updated_at":"2021-08-05T03:31:48.000Z","dependencies_parsed_at":"2023-02-02T02:15:48.009Z","dependency_job_id":null,"html_url":"https://github.com/Limoer96/resize-draggable","commit_stats":null,"previous_names":["xiaomoer/resize-draggable"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Limoer96/resize-draggable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Limoer96%2Fresize-draggable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Limoer96%2Fresize-draggable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Limoer96%2Fresize-draggable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Limoer96%2Fresize-draggable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Limoer96","download_url":"https://codeload.github.com/Limoer96/resize-draggable/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Limoer96%2Fresize-draggable/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274967771,"owners_count":25383107,"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","status":"online","status_checked_at":"2025-09-13T02:00:10.085Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","draggable-elements","resizer"],"created_at":"2024-11-05T19:06:56.763Z","updated_at":"2025-09-13T13:14:14.236Z","avatar_url":"https://github.com/Limoer96.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# resize-draggable\n\nA react component that can be used for sizing by dragging.\n\n```html\n\u003cdiv\u003e\n  \u003cdiv style={{ width: 100 }}\u003e\u003c/div\u003e\n  \u003cResizeDraggable direction=\"e\" /\u003e\n  \u003cdiv style={{ width: 100 }}\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Install\n\n```bash\n$ yarn add resize-draggable\n```\n\n## Usage\n\n```js\n// es6\nimport ResizeDraggable from \"resize-draggable\";\nimport \"resize-draggable/dist/main.css\";\n\n// CommonJS\nconst ResizeDraggable = require(\"resize-draggable\");\nrequire(\"resize-draggable/dist/main.css\");\n```\n\n## \u003cResizeDraggable\u003e\n\n`\u003cResizeDraggable\u003e` component is placed between two elements. it will change these two elsement by dragging. You can also click the bar on it to expand/collapse the elements in the specified direction.\n\nSee the [demo](http://212.64.77.74/resize-draggable/) for more.\n\n```js\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Draggleable from \"resize-draggable\";\nimport \"resize-draggable/dist/main.css\";\nimport \"./index.css\";\n\nconst App = () =\u003e (\n  \u003cdiv\u003e\n    \u003cdiv className=\"container-v\"\u003e\n      \u003cdiv className=\"prev\"\u003ePrev Element\u003c/div\u003e\n      \u003cDraggleable direction=\"w\" /\u003e\n      \u003cdiv className=\"next\"\u003eNext Element\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv className=\"container-v\"\u003e\n      \u003cdiv className=\"prev\"\u003ePrev Element\u003c/div\u003e\n      \u003cDraggleable direction=\"e\" /\u003e\n      \u003cdiv className=\"next\"\u003eNext Element\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv className=\"container-h\"\u003e\n      \u003cdiv className=\"prev-h\"\u003ePrev Element\u003c/div\u003e\n      \u003cDraggleable direction=\"n\" /\u003e\n      \u003cdiv className=\"next-h\"\u003eNext Element\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv className=\"container-h\"\u003e\n      \u003cdiv className=\"prev-h\"\u003ePrev Element\u003c/div\u003e\n      \u003cDraggleable direction=\"s\" /\u003e\n      \u003cdiv className=\"next-h\"\u003eNext Element\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n);\n\nrender(\u003cApp /\u003e, document.getElementById(\"root\"));\n```\n\n## \u003cResizeDraggable\u003e props\n\n```js\n{\n  // the expand/collapse bar direction, also decided the axis of the draggable\n  // east west north south\n  // if direction is 'n' or 's', the `axis` is 'y'\n  direction: 'e' || 'w' || 'n' || 's',\n\n  // show the expand/collapse bar or not, default is true\n  closable?: boolean,\n\n  // allow drag or not, default: false\n  dragDisabled?: boolean,\n\n  // Set to true if the opposite direction element is adaptive(eg flex:1 or use % width/height). default: false\n  adaptive?: boolean,\n\n  // the expand/collapse bar closed or not init, default is false.\n  defaultClosed?: boolean,\n\n  // the draggable element default position, default { x: 0, y: 0 }\n  // more about the prop, see: https://www.npmjs.com/package/react-draggable\n  defaultPosition?: object,\n\n  // custom function trigger when size changed\n  onResize?: (e, data) =\u003e {...}\n\n  // custom function called when expand/collapse one element\n  onToggleClose?: (e, prevElement, nextElement) =\u003e {...}\n\n  // custom style of this component\n  style?: object,\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flimoer96%2Fresize-draggable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flimoer96%2Fresize-draggable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flimoer96%2Fresize-draggable/lists"}