{"id":43581092,"url":"https://github.com/yyllff/split-pane-react","last_synced_at":"2026-02-04T00:00:23.617Z","repository":{"id":57702466,"uuid":"495746181","full_name":"yyllff/split-pane-react","owner":"yyllff","description":"Resizable split panes for React.js.","archived":false,"fork":false,"pushed_at":"2024-04-28T10:35:11.000Z","size":6948,"stargazers_count":100,"open_issues_count":15,"forks_count":26,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-20T06:46:00.936Z","etag":null,"topics":["react","react-component","split-pane","typescript"],"latest_commit_sha":null,"homepage":"https://yyllff.github.io/split-pane-react","language":"TypeScript","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/yyllff.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2022-05-24T09:03:05.000Z","updated_at":"2025-08-07T08:32:29.000Z","dependencies_parsed_at":"2024-06-18T15:32:16.518Z","dependency_job_id":null,"html_url":"https://github.com/yyllff/split-pane-react","commit_stats":{"total_commits":26,"total_committers":3,"mean_commits":8.666666666666666,"dds":0.5384615384615384,"last_synced_commit":"1380eacd439831788d2346d7f1c139d48df73bc8"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/yyllff/split-pane-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yyllff%2Fsplit-pane-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yyllff%2Fsplit-pane-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yyllff%2Fsplit-pane-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yyllff%2Fsplit-pane-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yyllff","download_url":"https://codeload.github.com/yyllff/split-pane-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yyllff%2Fsplit-pane-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29062480,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-03T23:14:54.203Z","status":"ssl_error","status_checked_at":"2026-02-03T23:14:50.873Z","response_time":96,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["react","react-component","split-pane","typescript"],"created_at":"2026-02-04T00:00:22.692Z","updated_at":"2026-02-04T00:00:23.581Z","avatar_url":"https://github.com/yyllff.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n[中文](/docs/中文文档.md)\n\n# split-pane-react\n\u003e Resizable split panes for [React.js](http://reactjs.org).Check out the [live demo](https://yyllff.github.io/split-pane-react/). Different [themes](https://codesandbox.io/s/split-pane-themes-xmsqtt).\n\n## Features\n\n- 💪**Simple api** and support for multiple panels.\n- 🔥Supports **vertical \u0026 horizontal layouts** and **fluid pane**.\n- 🎉Use **controlled component** mode, flexible use.\n- 😎**React16.8** version at least, and **React18** version at the same time.\n- 👷‍♂️Support flexible and convenient **customization of sash**.\n\n\n## Installing\n\n````sh\n# use npm\nnpm install split-pane-react\n\n# or if you use yarn\nyarn add split-pane-react\n````\n\n## Example Usage\n\n```jsx\nimport React, { useState } from 'react';\nimport SplitPane, { Pane } from 'split-pane-react';\nimport 'split-pane-react/esm/themes/default.css';\n\nfunction style (color) {\n  return {\n    height: '100%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    backgroundColor: color\n  };\n}\n\nfunction App () {\n  const [sizes, setSizes] = useState([100, '30%', 'auto']);\n\n  return (\n    \u003cdiv style={{ height: 500 }}\u003e\n      \u003cSplitPane\n        split='vertical'\n        sizes={sizes}\n        onChange={setSizes}\n      \u003e\n        \u003cPane minSize={50} maxSize='50%'\u003e\n          \u003cdiv style={style('#ddd')}\u003e\n            pane1\n          \u003c/div\u003e\n        \u003c/Pane\u003e\n        \u003cdiv style={style('#ccc')}\u003e\n          pane2\n        \u003c/div\u003e\n        \u003cdiv style={style('#eee')}\u003e\n          pane3\n        \u003c/div\u003e\n      \u003c/SplitPane\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n## props\n\n**SplitPane**\n\n|    Property    |    Description   |   Type     |  Default     |\n| -------------- | ---------------- | :--------: | :----------: |\n| split    | Determine layout of panes. | 'vertical' \\|'horizontal' |'vertical' |\n| sizes | Collection of different panel sizes,Only support controlled mode, so it's required | (string \\| number)[] |[] |\n| resizerSize | Specify the size for resizer | number |4 |\n| allowResize | Should allowed to resized | boolean |true |\n| className | split pane custom class name | string |void |\n| sashRender | User defined sliding axis function | (index: number, active: boolean) =\u003e void |void |\n| performanceMode | High performance mode to avoid excessive pressure on the browser | boolean | false |\n| onChange | Callback of size change | (sizes: number[]) =\u003e void |void |\n| onDragStart | This callback is invoked when a drag starts | () =\u003e void |void |\n| onDragEnd | This callback is invoked when a drag ends | () =\u003e void |void |\n\n**Pane**\n\n|    Property    |    Description   |  Type  | Default |\n| ------------------ | ---------------- | :--------: | ------------------ |\n| className | pane class name | string | void |\n| minSize | Limit the minimum size of the panel | string \\| number | void |\n| maxSize | Limit the maximum size of this panel | string\\|number | void |\n\n## themes\n\nYou can use the sashRender parameter to configure the theme you need:\n\n- The default theme style refers to vscode style\n- At the same time, we have built in a theme similar to sublime\n- Other demo [themes](https://codesandbox.io/s/split-pane-themes-xmsqtt).\n\n\n## License\n\n**[split-pane-react](https://github.com/yyllff/split-pane-react)** licensed under [MIT](LICENSE).\n\n\u003e PS: I would love to know if you're using split-pane-react. If you have any use problems, you can raise the issue, and I will repair them as soon as possible. The project will always be maintained. If you have a good idea, you can propose a merge. **If this component helps you, please leave your star. Those who need it will be very grateful.**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyyllff%2Fsplit-pane-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyyllff%2Fsplit-pane-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyyllff%2Fsplit-pane-react/lists"}