{"id":13402825,"url":"https://github.com/tomkp/react-split-pane","last_synced_at":"2025-05-13T15:12:26.746Z","repository":{"id":28260194,"uuid":"31770305","full_name":"tomkp/react-split-pane","owner":"tomkp","description":"React split-pane component","archived":false,"fork":false,"pushed_at":"2023-12-08T02:03:16.000Z","size":22584,"stargazers_count":3265,"open_issues_count":167,"forks_count":414,"subscribers_count":34,"default_branch":"master","last_synced_at":"2025-05-09T00:34:38.943Z","etag":null,"topics":["react","react-component","split-pane"],"latest_commit_sha":null,"homepage":"https://tomkp.github.io/react-split-pane","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/tomkp.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-03-06T13:25:20.000Z","updated_at":"2025-05-06T08:54:58.000Z","dependencies_parsed_at":"2022-07-12T01:47:36.038Z","dependency_job_id":"f7dea586-3409-4b20-a7d4-8fd400f2d320","html_url":"https://github.com/tomkp/react-split-pane","commit_stats":{"total_commits":551,"total_committers":57,"mean_commits":9.666666666666666,"dds":0.4246823956442831,"last_synced_commit":"49c6d3655a2828f906e3ba5e4c204bbd46a649d0"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomkp%2Freact-split-pane","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomkp%2Freact-split-pane/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomkp%2Freact-split-pane/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomkp%2Freact-split-pane/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomkp","download_url":"https://codeload.github.com/tomkp/react-split-pane/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253969266,"owners_count":21992264,"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":["react","react-component","split-pane"],"created_at":"2024-07-30T19:01:21.376Z","updated_at":"2025-05-13T15:12:21.682Z","avatar_url":"https://github.com/tomkp.png","language":"JavaScript","readme":"# React Split Pane\n\n[![NPM version](https://img.shields.io/npm/v/react-split-pane.svg?style=flat)](https://www.npmjs.com/package/react-split-pane)\n![NPM license](https://img.shields.io/npm/l/react-split-pane.svg?style=flat)\n[![NPM total downloads](https://img.shields.io/npm/dt/react-split-pane.svg?style=flat)](https://npmcharts.com/compare/react-split-pane?minimal=true)\n[![NPM monthly downloads](https://img.shields.io/npm/dm/react-split-pane.svg?style=flat)](https://npmcharts.com/compare/react-split-pane?minimal=true)\n![Build Test](https://github.com/tomkp/react-split-pane/workflows/Build%20Test/badge.svg)\n[![Coverage Status](https://img.shields.io/coveralls/tomkp/react-split-pane/master.svg?style=flat)](https://coveralls.io/r/tomkp/react-split-pane)\n\nSplit-Pane React component, can be nested or split vertically or horizontally!\n\n## Installing\n\n```sh\nnpm install react-split-pane\n\n# or if you use yarn\n\nyarn add react-split-pane\n```\n\n## Example Usage\n\n```jsx\n\u003cSplitPane split=\"vertical\" minSize={50} defaultSize={100}\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n\u003c/SplitPane\u003e\n```\n\n```jsx\n\u003cSplitPane split=\"vertical\" minSize={50}\u003e\n  \u003cdiv /\u003e\n  \u003cSplitPane split=\"horizontal\"\u003e\n    \u003cdiv /\u003e\n    \u003cdiv /\u003e\n  \u003c/SplitPane\u003e\n\u003c/SplitPane\u003e\n```\n\n## Props\n\n### primary\n\nBy dragging 'draggable' surface you can change size of the first pane.\nThe first pane keeps then its size while the second pane is resized by browser window.\nBy default it is the left pane for 'vertical' SplitPane and the top pane for 'horizontal' SplitPane.\nIf you want to keep size of the second pane and let the first pane to shrink or grow by browser window dimensions,\nset SplitPane prop `primary` to `second`. In case of 'horizontal' SplitPane the height of bottom pane remains the same.\n\nResizing can be disabled by passing the `allowResize` prop as `false` (`allowResize={false}`). Resizing is enabled by default.\n\nYou can also set the size of the pane using the `size` prop. Note that a size set through props ignores the `defaultSize` and `minSize` properties.\n\nIn this example right pane keeps its width 200px while user is resizing browser window.\n\n```jsx\n\u003cSplitPane split=\"vertical\" defaultSize={200} primary=\"second\"\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n\u003c/SplitPane\u003e\n```\n\n### maxSize\n\nYou can limit the maximal size of the 'fixed' pane using the maxSize parameter with a positive value (measured in pixels but state just a number).\nIf you wrap the SplitPane into a container component (yes you can, just remember the container has to have the relative or absolute positioning),\nthen you'll need to limit the movement of the splitter (resizer) at the end of the SplitPane (otherwise it can be dragged outside the SplitPane\nand you don't catch it never more). For this purpose use the maxSize parameter with value 0. When dragged the splitter/resizer will stop at the border\nof the SplitPane component and think this you'll be able to pick it again and drag it back then.\nAnd more: if you set the maxSize to negative value (e.g. -200), then the splitter stops 200px before the border (in other words it sets the minimal\nsize of the 'resizable' pane in this case). This can be useful also in the full-screen case of use.\n\n### step\n\nYou can use the step prop to only allow resizing in fixed increments.\n\n### onDragStarted\n\nThis callback is invoked when a drag starts.\n\n### onDragFinished\n\nThis callback is invoked when a drag ends.\n\n### onChange\n\nThis callback is invoked with the current drag during a drag event. It is recommended that it is wrapped in a debounce function.\n\n### Inline Styles\n\nYou can also pass inline styles to the components via props. These are:\n\n- `style` - Styling to be applied to the main container.\n- `paneStyle` - Styling to be applied to both panes\n- `pane1Style` - Styling to be applied to the first pane, with precedence over `paneStyle`\n- `pane2Style` - Styling to be applied to the second pane, with precedence over `paneStyle`\n- `resizerStyle` - Styling to be applied to the resizer bar\n\n## Persisting Positions\n\nEach SplitPane accepts an onChange function prop. Used in conjunction with\ndefaultSize and a persistence layer, you can ensure that your splitter choices\nsurvive a refresh of your app.\n\nFor example, if you are comfortable with the trade-offs of localStorage, you\ncould do something like the following:\n\n```jsx\n\u003cSplitPane\n  split=\"vertical\"\n  minSize={50}\n  defaultSize={parseInt(localStorage.getItem('splitPos'), 10)}\n  onChange={(size) =\u003e localStorage.setItem('splitPos', size)}\n\u003e\n  \u003cdiv /\u003e\n  \u003cdiv /\u003e\n\u003c/SplitPane\u003e\n```\n\nDisclaimer: localStorage has a variety of performance trade-offs. Browsers such\nas Firefox have now optimized localStorage use so that they will asynchronously\ninitiate a read of all saved localStorage data for an origin once they know the\npage will load. If the data has not fully loaded by the time code accesses\nlocalStorage, the code will cause the page's main thread to block until the\ndatabase load completes. When the main thread is blocked, no other JS code will\nrun or layout will occur. In multiprocess browsers and for users with fast\ndisk storage, this will be less of a problem. You _are_ likely to get yelled at\nif you use localStorage.\n\nA potentially better idea is to use something like\nhttps://github.com/mozilla/localForage although hooking it up will be slightly\nmore involved. You are likely to be admired by all for judiciously avoiding\nuse of localStorage.\n\n## Example styling\n\nThis gives a single pixel wide divider, but with a 'grabbable' surface of 11 pixels.\n\nThanks to `background-clip: padding-box;` for making transparent borders possible.\n\n```css\n.Resizer {\n  background: #000;\n  opacity: 0.2;\n  z-index: 1;\n  -moz-box-sizing: border-box;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  -moz-background-clip: padding;\n  -webkit-background-clip: padding;\n  background-clip: padding-box;\n}\n\n.Resizer:hover {\n  -webkit-transition: all 2s ease;\n  transition: all 2s ease;\n}\n\n.Resizer.horizontal {\n  height: 11px;\n  margin: -5px 0;\n  border-top: 5px solid rgba(255, 255, 255, 0);\n  border-bottom: 5px solid rgba(255, 255, 255, 0);\n  cursor: row-resize;\n  width: 100%;\n}\n\n.Resizer.horizontal:hover {\n  border-top: 5px solid rgba(0, 0, 0, 0.5);\n  border-bottom: 5px solid rgba(0, 0, 0, 0.5);\n}\n\n.Resizer.vertical {\n  width: 11px;\n  margin: 0 -5px;\n  border-left: 5px solid rgba(255, 255, 255, 0);\n  border-right: 5px solid rgba(255, 255, 255, 0);\n  cursor: col-resize;\n}\n\n.Resizer.vertical:hover {\n  border-left: 5px solid rgba(0, 0, 0, 0.5);\n  border-right: 5px solid rgba(0, 0, 0, 0.5);\n}\n.Resizer.disabled {\n  cursor: not-allowed;\n}\n.Resizer.disabled:hover {\n  border-color: transparent;\n}\n```\n\n## New Version\n\n**I'm working on an updated version of this library, and looking for help:**\n\nDemo\n\nhttp://react-split-pane-v2.surge.sh/\n\nInstall\n\n```sh\nnpm install react-split-pane@next\n\n# or if you use yarn\n\nyarn add react-split-pane@next\n```\n\nUsage\n\n```jsx\nimport SplitPane, { Pane } from 'react-split-pane';\n\n\u003cSplitPane split=\"vertical\"\u003e\n  \u003cPane initialSize=\"200px\"\u003eYou can use a Pane component\u003c/Pane\u003e\n  \u003cdiv\u003eor you can use a plain old div\u003c/div\u003e\n  \u003cPane initialSize=\"25%\" minSize=\"10%\" maxSize=\"500px\"\u003e\n    Using a Pane allows you to specify any constraints directly\n  \u003c/Pane\u003e\n\u003c/SplitPane\u003e;\n```\n\nPull request\n\nhttps://github.com/tomkp/react-split-pane/pull/240\n\nMore discussion\n\nhttps://github.com/tomkp/react-split-pane/issues/233\n\n## Contributing\n\nI'm always happy to receive Pull Requests for contributions of any kind.\n\nPlease include tests and/or update the examples if possible.\n\nThanks, Tom\n","funding_links":[],"categories":["JavaScript","UI Components","Uncategorized","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e","TypeScript","UI Components / UI Tools"],"sub_categories":["Miscellaneous","Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomkp%2Freact-split-pane","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomkp%2Freact-split-pane","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomkp%2Freact-split-pane/lists"}