{"id":13422232,"url":"https://github.com/martinnov92/React-Splitters","last_synced_at":"2025-03-15T11:31:25.865Z","repository":{"id":41514088,"uuid":"83121557","full_name":"martinnov92/React-Splitters","owner":"martinnov92","description":"React splitter component, written in TypeScript. ","archived":true,"fork":false,"pushed_at":"2022-12-10T17:04:19.000Z","size":4057,"stargazers_count":160,"open_issues_count":29,"forks_count":21,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-04-27T04:03:50.781Z","etag":null,"topics":["component","es6","javascript","js","react","react-component","react-components","react-splitters","reactjs","splitter","ts","typescript"],"latest_commit_sha":null,"homepage":"https://martinnov92.github.io/React-Splitters/","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/martinnov92.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-25T09:35:07.000Z","updated_at":"2024-03-12T18:27:26.000Z","dependencies_parsed_at":"2023-01-26T05:31:02.974Z","dependency_job_id":null,"html_url":"https://github.com/martinnov92/React-Splitters","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinnov92%2FReact-Splitters","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinnov92%2FReact-Splitters/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinnov92%2FReact-Splitters/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinnov92%2FReact-Splitters/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/martinnov92","download_url":"https://codeload.github.com/martinnov92/React-Splitters/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243724949,"owners_count":20337655,"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","es6","javascript","js","react","react-component","react-components","react-splitters","reactjs","splitter","ts","typescript"],"created_at":"2024-07-30T23:00:40.011Z","updated_at":"2025-03-15T11:31:25.454Z","avatar_url":"https://github.com/martinnov92.png","language":"JavaScript","funding_links":[],"categories":["UI Layout","UI Components","Soluções"],"sub_categories":["Form Components","Layout"],"readme":"# Splitters for React\n\n\u003ci\u003ev. 1.2.0\u003c/i\u003e\n\n**New version changes**\n\n* fixed [issue](https://github.com/martinnov92/React-Splitters/issues/15)\n\n\u003ci\u003ev. 1.1.0\u003c/i\u003e\n\n**New version changes**\n\n* fixed issue with `getBoundingClientRect` in React 16\n\n[NPM](https://www.npmjs.com/package/m-react-splitters)\n\n[Demo](https://martinnov92.github.io/React-Splitters/)\n\nInstall: `npm install --save m-react-splitters` \n\n---------\n\nSplitters for React has been written in TypeScript.\n\nThis splitter supports touch screens.\n\nThere are two options how the splitter can work.\nYou can either select to resize splitters as you are holding and dragging the handlebar, or you can\npostponed the resize.\n\nSplitters can be nested, but you have to specify what positions (vertical / horizontal) are they going to be and their sizes.\n\nLeft pane's (primary) width is calculated by `JavaScript`, the other panel's width is set by `CSS`.\n\nUsage in your projects:\nPlease import splitters like this:\n\n```\nimport Splitter from 'm-react-splitters';\nimport 'm-react-splitters/lib/splitters.css';\n```\n\nVertical splitter\n```js\nprimaryPaneMinWidth={number}\nprimaryPaneMaxWidth=\"string\" (% or px)\nprimaryPaneWidth=\"string\" (% or px)\n```\n\nVertical splitter\n```js\nprimaryPaneMinWidth={number}\nprimaryPaneMaxWidth=\"string\" (% or px)\nprimaryPaneWidth=\"string\" (% or px)\n```\n\nHorizontal splitter\n```js\nprimaryPaneMinHeight={number}\nprimaryPaneMaxHeight=\"string\" (% or px)\nprimaryPaneHeight=\"string\" (% or px)\n```\n\nAnother options for splitter are:\n\n* `postPoned`: Boolean\n\n    * this specifies how the resize will work\n    * default is false \n\n* `className`: string \n* `primaryPaneClassName`: string\n* `secondaryPaneClassName`: string\n* `dispatchResize`: Boolean\n    \n    * This dispatch resize event, it is meant for other components which resize on window resize\n    * it's something like temporary callback function\n    * Default is false\n\n    * or you can use:\n        \n        `onDragFinished`: function\n\n* `maximizedPrimaryPane`: Boolean\n* `minimalizedPrimaryPane`: Boolean\n\n```tsx\n\u003cSplitter\n    position=\"horizontal\"\n    primaryPaneMaxHeight=\"80%\"\n    primaryPaneMinHeight={0}\n    primaryPaneHeight=\"400px\"\n    dispatchResize={true}\n    postPoned={true}\n\u003e    \n    \u003cSplitter\n        position=\"vertical\"\n        primaryPaneMaxWidth=\"80%\"\n        primaryPaneMinWidth={0}\n        primaryPaneWidth=\"400px\"\n        postPoned={false}\n    \u003e    \n        \u003cdiv\u003e\u003c/div\u003e\n        \u003cdiv\u003e\u003c/div\u003e\n    \u003c/Splitter\u003e \n    \u003cdiv\u003e\u003c/div\u003e\n\u003c/Splitter\u003e \n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartinnov92%2FReact-Splitters","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmartinnov92%2FReact-Splitters","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartinnov92%2FReact-Splitters/lists"}