[];\n```\n* `initialSizes` is the default flex-basis that's given to the panes\n* `minSizes` is either (1) a minimum size that's given to **all** the panes, or (2) an array of minimum sizes that's given to each pane in order. Any missing sizes in the array will be assumed default.\n* `collapsedSizes` an array of nullable numbers. This keeps track of a pane's size before it was collapsed. If not collapsed it's null. This will determine which panels are collapsed and what to do when they're uncollapsed.\n\n\n## RTL Support ( Arabic, Hebrew, Farsi ) ๐\n\nThis library easily supports LTR languages by providing a `direction` prop. This is only necessary if you're using RTL. \n\n**Note!** ๐จ the `direction` is _only_ applicable if the split is `vertical` \n\ne.g.\n```tsx\n \n
\n ุงูููุญุฉ ุงูุฃููู
\n ุงูููุญุฉ ุงูุซุงููุฉ
\n ุงูููุญุฉ ุงูุซุงูุซุฉ
\n ุงูููุญุฉ ุงูุฑุงุจุนุฉ
\n \n ![\"logo\"](\"logo.svg\")
\r\n\r\n \r\n ![\"prs](\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\")
\r\n \r\n ![\"Release\"](\"https://github.com/b-zurg/react-collapse-pane/workflows/Release/badge.svg?branch=master\")
\r\n \r\n ![\"All](\"https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square\")
\r\n \r\n \r\n ![\"styled](\"https://img.shields.io/badge/styled_with-prettier-ff69b4.svg\")
\r\n \r\n \r\n ![\"semantic-release\"](\"https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg\")
\r\n \r\n \r\n ![\"npm](\"https://img.shields.io/npm/v/react-collapse-pane/latest.svg\")
\r\n \r\n \r\n ![\"npm](\"https://img.shields.io/npm/v/react-collapse-pane/next.svg\")
\r\n \r\n \r\n ![\"npm](\"https://img.shields.io/npm/dw/react-collapse-pane\")
\r\n \r\n \r\n ![\"storybook\"](\"https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg\")
\r\n \r\n \r\n ![\"storybook\"](\"https://img.shields.io/badge/License-MIT-yellow.svg\")
\r\n \r\n\r\n
\r\n\r\n## [[click for storybook demo]](https://storybook.collapse-pane.zurg.dev/)\r\n## [[click for documentation site]](https://collapse-pane.zurg.dev/)\r\n\r\n# Getting Started :rocket:\r\n\r\nInstall react-collapse-pane:\r\n```bash\r\nnpm i react-collapse-pane\r\n\r\n# or for yarn\r\n\r\nyarn add react-collapse-pane\r\n```\r\n\r\nOnce installed you can import the `SplitPane` component in your code.\r\n\r\n```ts\r\nimport { SplitPane } from \"react-collapse-pane\";\r\n```\r\n\r\nIf you're using Typescript the `SplitPaneProps`, as well as a few other helper types type is also available.\r\n```ts\r\nimport { SplitPane, SplitPaneProps, ResizerOptions, CollapseOptions, SplitPaneHooks } from \"react-collapse-pane\";\r\n```\r\n# Quick Start Usage :fire:\r\n\r\nThe only component you must interact with is `SplitPane`. This serves as a wrapper for all of the children you wish to lay out.\r\n\r\nAll you're required to give is a `split` prop which can be either `\"horizontal\"` or `\"vertical\"`. This identifies what the orientation of the split panel will be.\r\n\r\n```tsx\r\n\r\n This is the first div
\r\n This is the second div
\r\n This is the third div
\r\n This is the fourth but not a div!\r\n\r\n```\r\n\r\nWhat you just did is make a split collapsible panel layout!\r\n\r\n## Congrats! That was easy! :grin:\r\n\r\nThis basically splits the children vertically (i.e. full-height split). The children can be any valid React child. If a child is `null` it will be excluded from being split or displayed.\r\n\r\nBy default there is a 1px divider with a grabbable surface of 1rem width or height (depending on the split). If you hover over the divider a button will appear that you can use to collapse the panel.\r\n\r\nThere is no limit to the number of elements you have as children. The `SplitPane` will split them all accordingly.\r\n\r\n## But what about *styling* the resizer, the buttons, controlling the animations, or *RTL* support? :sob:\r\n\r\nThis library supports all of these things and more! \r\n\r\nFor more details check out [the documentation](https://collapse-pane.zurg.dev/)\r\n\r\n# Documentation\r\n\r\nDocumentation can be found at https://collapse-pane.zurg.dev \r\n\r\nIf you notice an issue then please make an issue or a PR! All docs are generated from the `docs` folder in the master branch.\r\n\r\n# Contributing and PRs :sparkling_heart:\r\n\r\nIf you would like to contribute please check out the [contributor guide](/CONTRIBUTING.md)\r\n\r\nAll contributions are welcome! All issues and feature requests are welcome!\r\n\r\n# Credit and Attribution :pray:\r\n\r\nThis project did not start off from scratch. The foundation of the project was the excellently written [react-multi-split-pane](https://github.com/neoraider/react-multi-split-pane) library which is itself a typescript rewrite of the [react-split-pane](https://github.com/tomkp/react-split-pane) library. \r\n\r\nMuch gratitude to their authors, [@NeoRaider](https://github.com/NeoRaider) and [@tomkp](https://github.com/tomkp) \r\n\r\n## Contributors โจ\r\n\r\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\r\n","readmeFilename":"README.md","gitHead":"e8fb4d0d85b09aa435aaca05140a42d2efc57772","_id":"react-collapse-pane@2.0.0","_nodeVersion":"12.18.1","_npmVersion":"6.14.5","dist":{"integrity":"sha512-59IPsKOl/1HmOZBuK2g8KdIQdW7cgoVAYKEKgZ3PJbJu06n5QFyo7VlYBgJAqS6ceEfB/ImriZX8EuCZhJNfXg==","shasum":"fd9237bb3aa5c2a51fc44f206300f676b49e5ccc","tarball":"https://registry.npmjs.org/react-collapse-pane/-/react-collapse-pane-2.0.0.tgz","fileCount":71,"unpackedSize":434058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCw56CRA9TVsSAnZWagAALwoP/Asv/B+W83LixefhtyX7\nZjU/x/c0nHnRvPuOAYaehwTaHTEVEg9X/8YJ5UJqEeukbCVOoOLT0J7BRVlY\npBSKD6RHU2vUNUO7RQ1EhOWHFiAyRcd9gGERD4LoUadbi+qWeD++SyMUKrkL\nTx5cA0MIqobEC7E3FAAhJMWuLwIIQS24BDrAQfZ4YG/UbwAvA/H8+7ah6y8Y\nm2hIkxPdXv2TQyTbUfTlcMrZCnTE9Ip1Fn3dQQ86yZIjJv1XGcyj/u3wW3f5\nBYgQX1yHRIEbusROqNMT1toVibEQixtgnicXHO22/o/D6saomHNGXXoJIdHD\nATXSOxwUy41d38cvGeL/QN/V1Ag9uUS2NIiq6rZYOPY5e8/Nc1b0KlXDjWwO\nyzz2TYP5nuTKKZRzA/Fmuo+uZiAMEtTKAlnPMV0yAObkdhDRDWLL+VobtZIm\nTQyTLNAYfvV983Xv2GtT5O3QHFzvnYDCdRs6qAdHo0ovy/kzpH8Vy2/YrnlY\nCJic9WjENjMEIv8ScqAORPQNgpFfqGrlJOnp+8ayT+Qn34XkSZrTT6OrTYPe\nge4qhuQDKFrkutjha6Rf7TZw/iiXpBIbb1E8t1MhilUOSwl8FajGe3VPJNnA\nVYqdsGN1UJ89+wVGwTxidNSE1xvNibQVtaOcGb4CIDr+xVTrtglpwUB8CZ6y\nGt5g\r\n=9pef\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDjUcq/bbxfNWhOfekutLcHm15i++vCJom1lDQ1GBbkcAiEA5c8wo5FOMCOunmshNX20qC7WgbhH0I6G9Rn7Ne64sPE="}]},"maintainers":[{"name":"b-zurg","email":"buzurg.arjmandi@gmail.com"}],"_npmUser":{"name":"b-zurg","email":"buzurg.arjmandi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-collapse-pane_2.0.0_1594560121667_0.6944836595462425"},"_hasShrinkwrap":false},"2.0.1":{"version":"2.0.1","license":"MIT","name":"react-collapse-pane","repository":{"type":"git","url":"git+https://github.com/b-zurg/react-collapse-pane.git"},"homepage":"https://collapse-pane.zurg.dev","bugs":{"url":"https://github.com/b-zurg/react-collapse-pane/issues"},"description":"The splittable, draggable and collapsible react layout library.","author":{"name":"Buzurgmehr Arjmandi"},"module":"dist/react-collapse-pane.esm.js","main":"dist/index.js","typings":"dist/index.d.ts","keywords":["react","react-component","split","pane","layout","collapse","typescript","splitter","splittable","collapsible","drag","draggable","dragging","panel","component"],"engines":{"node":">=10"},"scripts":{"start":"tsdx watch","build":"tsdx build","test":"tsdx test --passWithNoTests","lint":"tsdx lint","lint:fix":"tsdx lint --fix","prepare":"tsdx build","storybook":"start-storybook -p 6006","build-storybook":"build-storybook"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":100,"semi":true,"singleQuote":true,"trailingComma":"es5"},"dependencies":{"@material-ui/core":"^4.11.4","styled-components":"^5.3.0"},"devDependencies":{"@babel/core":"^7.12.10","@storybook/addon-actions":"^6.2.9","@storybook/addon-essentials":"^6.2.9","@storybook/addon-links":"^6.2.9","@storybook/react":"^6.2.9","@types/react":"^17.0.5","@types/react-dom":"^17.0.4","@types/styled-components":"^5.1.9","babel-loader":"^8.2.2","husky":"^6.0.0","react":"^17.0.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^17.0.0","react-is":"^17.0.2","ts-loader":"^9.1.2","tsdx":"^0.14.1","tslib":"^2.2.0","typescript":"^4.2.4"},"peerDependencies":{"react":">=16"},"gitHead":"884670946aa1f9af1ad4e4a2541f80239414ffcf","_id":"react-collapse-pane@2.0.1","_nodeVersion":"12.22.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-6D95mymzY+NFKDkvjBGgsRNYbcSdLeY3Af7ll+IfIKh7dAmHyqKFh6cGj4sueVdxWoAgtbagiIeRgRcX/rYXUA==","shasum":"e5dc9c2c16d2ecd98f36ed81daa2a36948960a4a","tarball":"https://registry.npmjs.org/react-collapse-pane/-/react-collapse-pane-2.0.1.tgz","fileCount":71,"unpackedSize":434088,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnPB3CRA9TVsSAnZWagAAmzQP/0vcHwS4AcvZOXpoETEb\nCpV+omGyQeZlc7rzgQunL3kcPyoPAde2BvWjET1WOModb3K6MHkATw+A+Nnu\n1yCm6a4uh+uXBki6ms5WntbZmajgwnGjwINKVieNed7n/94y2Fg8Bb2Bm/Bo\nX1bT+paIwbuPLw4d59wSlQez88aQXzyXZmhPmGQd1MbdEkWmJqZi6sgPGXJG\nGQZxCXdV+PRVvpF1aQc+rt7G2+nD87wVhLpx7K5UvgRAwxeMM+vJw2V+WgaX\n1YkyMP10wLPq60oZZmR2pqu2noEMbdSnEiMhJkVFD59YZiPnyvsxDCuCgSHF\nFQQuQRA3x7eOfCVyyvtjk70/7wQeh+7hkW3Ledt/KBRrZ2DX9fF9Xd9BYKTA\nEE0yHG7PGyTsbax6C6ShEqxB1kudP/U6ZaCIDNVNKSbpQMhO5af0tsrdbWMy\nRdMHIdgdTnMbVOIQvMVdCbNGcII6ZDwSDBLKKTnPXdYdaf2nb2mCvZYbdAKO\nz+OJV3s6BU6oo5wNs4uyJFtxbE3eUT4Ei/UYa5+MhjyF6itpwqZwS8jIMFYA\nrPR8KvaEJslNjQi2qkdzMRacAf6ryxSndwjwr0vZiU6d3I9pXtHqzTI1mqL+\nQCBo53QrfINLUAOyU88yuiJzYuHrX592Ul1kmiCxOCApZsXgVqUJqdSNGv9U\nFd6l\r\n=Pv6R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFeEd5pDsYaRx8mDwyO+nEob8suUSmsCknJPGfTN3EVBAiEAoOY28kRSTXcKxlaF9/u/yL6i/tMQG224N8cR0whU8Ts="}]},"_npmUser":{"name":"b-zurg","email":"buzurg.arjmandi@gmail.com"},"directories":{},"maintainers":[{"name":"b-zurg","email":"buzurg.arjmandi@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-collapse-pane_2.0.1_1620897909679_0.9847154765168902"},"_hasShrinkwrap":false},"3.0.0":{"version":"3.0.0","license":"MIT","name":"react-collapse-pane","repository":{"type":"git","url":"git+https://github.com/b-zurg/react-collapse-pane.git"},"homepage":"https://b-zurg.github.io/react-collapse-pane/","bugs":{"url":"https://github.com/b-zurg/react-collapse-pane/issues"},"description":"The splittable, draggable and collapsible react layout library.","author":{"name":"Buzurgmehr Arjmandi"},"module":"dist/react-collapse-pane.esm.js","main":"dist/index.js","typings":"dist/index.d.ts","keywords":["react","react-component","split","pane","layout","collapse","typescript","splitter","splittable","collapsible","drag","draggable","dragging","panel","component"],"engines":{"node":">=10"},"scripts":{"start":"tsdx watch","build":"tsdx build","test":"tsdx test --passWithNoTests","lint":"tsdx lint","lint:fix":"tsdx lint --fix","prepare":"tsdx build","storybook":"start-storybook -p 6006","build-storybook":"build-storybook"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":100,"semi":true,"singleQuote":true,"trailingComma":"es5"},"dependencies":{},"devDependencies":{"@babel/core":"^7.18.0","@mui/material":"^5.8.0","@storybook/addon-actions":"^6.5.3","@storybook/addon-essentials":"^6.5.3","@storybook/addon-links":"^6.5.3","@storybook/react":"^6.5.3","@types/react":"^18.0.9","@types/react-dom":"^18.0.4","@types/styled-components":"^5.1.25","babel-loader":"^8.2.5","html-webpack-plugin":"^5.5.0","husky":"^6.0.0","react":"^18.1.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^18.1.0","react-is":"^18.1.0","styled-components":"^5.3.5","ts-loader":"^9.3.0","tsdx":"^0.14.1","tslib":"^2.4.0","typescript":"^4.6.4"},"peerDependencies":{"react":">=16","@mui/material":"^5.8.0"},"readme":"# react-collapse-pane\r\n\r\nThis is intended to be **the** simple, reliable, configurable, and elegant solution to having splittable, draggable and collapsible panes in your React application. \r\n\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n
\r\n\r\n## [[click for storybook demo]](https://storybook-collapse-pane.netlify.app/)\r\n## [[click for documentation site]](https://b-zurg.github.io/react-collapse-pane/)\r\n\r\n# Getting Started :rocket:\r\n\r\nInstall react-collapse-pane:\r\n```bash\r\nnpm i react-collapse-pane\r\n\r\n# or for yarn\r\n\r\nyarn add react-collapse-pane\r\n```\r\n\r\nOnce installed you can import the `SplitPane` component in your code.\r\n\r\n```ts\r\nimport { SplitPane } from \"react-collapse-pane\";\r\n```\r\n\r\nIf you're using Typescript the `SplitPaneProps`, as well as a few other helper types type is also available.\r\n```ts\r\nimport { SplitPane, SplitPaneProps, ResizerOptions, CollapseOptions, SplitPaneHooks } from \"react-collapse-pane\";\r\n```\r\n# Quick Start Usage :fire:\r\n\r\nThe only component you must interact with is `SplitPane`. This serves as a wrapper for all of the children you wish to lay out.\r\n\r\nAll you're required to give is a `split` prop which can be either `\"horizontal\"` or `\"vertical\"`. This identifies what the orientation of the split panel will be.\r\n\r\n```tsx\r\n\r\n This is the first div
\r\n This is the second div
\r\n This is the third div
\r\n This is the fourth but not a div!\r\n\r\n```\r\n\r\nWhat you just did is make a split collapsible panel layout!\r\n\r\n## Congrats! That was easy! :grin:\r\n\r\nThis basically splits the children vertically (i.e. full-height split). The children can be any valid React child. If a child is `null` it will be excluded from being split or displayed.\r\n\r\nBy default there is a 1px divider with a grabbable surface of 1rem width or height (depending on the split). If you hover over the divider a button will appear that you can use to collapse the panel.\r\n\r\nThere is no limit to the number of elements you have as children. The `SplitPane` will split them all accordingly.\r\n\r\n## But what about *styling* the resizer, the buttons, controlling the animations, or *RTL* support? :sob:\r\n\r\nThis library supports all of these things and more! \r\n\r\nFor more details check out [the documentation](https://b-zurg.github.io/react-collapse-pane/)\r\n\r\n# Documentation\r\n\r\nDocumentation can be found at https://b-zurg.github.io/react-collapse-pane/ \r\n\r\nIf you notice an issue then please make an issue or a PR! All docs are generated from the `docs` folder in the master branch.\r\n\r\n# Contributing and PRs :sparkling_heart:\r\n\r\nIf you would like to contribute please check out the [contributor guide](/CONTRIBUTING.md)\r\n\r\nAll contributions are welcome! All issues and feature requests are welcome!\r\n\r\n# Credit and Attribution :pray:\r\n\r\nThis project did not start off from scratch. The foundation of the project was the excellently written [react-multi-split-pane](https://github.com/neoraider/react-multi-split-pane) library which is itself a typescript rewrite of the [react-split-pane](https://github.com/tomkp/react-split-pane) library. \r\n\r\nMuch gratitude to their authors, [@NeoRaider](https://github.com/NeoRaider) and [@tomkp](https://github.com/tomkp) \r\n\r\n## Contributors โจ\r\n\r\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\r\n","readmeFilename":"README.md","gitHead":"4b1ef3dd9d20eb299995b6a97146caa19189c9d0","_id":"react-collapse-pane@3.0.0","_nodeVersion":"12.22.7","_npmVersion":"6.14.15","dist":{"integrity":"sha512-YRsDJ5nzOdlTfq0nNjTk422h9Z2euHAvWmkZgI4Vk+neVGldT9Okbszpzbmzg2Z+ZSWcbb2LLzxxNhrl7kxA3g==","shasum":"6e6030cbd102e255db28a22496d3ce0c4b3c8da6","tarball":"https://registry.npmjs.org/react-collapse-pane/-/react-collapse-pane-3.0.0.tgz","fileCount":71,"unpackedSize":428915,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDkl3hCjrnYq7CyMLxI+5wIFH/zWmVm2y4k8zau5Gm9eAiEAnFRYdpQQOzbGVI7zLPKm8XkFosWaJ1hueDrRRxPgsDM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiNwVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZcg//enZ2USX2uTo0Bn8164C2WlweJPPXLWm7Qb6wtHcaBnQvFJTa\r\nwP1226LYvglkgUdQAcboy2afoYd7pcuD4akbMgWvmshXl9Yg0N4yOcH1OnSR\r\nR9yeUthbF0B77VgqpaqNDU0eNcnVnjE7HgITHNugAIksuaQ3CUqNswbQB5Q+\r\nHKrbijKp+Ndf/KMpqWtxRzu8LOv4VwxGwIGn2I9On8s7pCl7V/nORRNvK5q7\r\nJ8fBgGT9hTEwuov+UFSb99UgYon/8+P9mHGt5qQW6EAVcolegOr6uTx/GUEd\r\netwoTcf+5QGL9f8+lJ+r5tYL7EO5Q3hkgijL/pVF0bPV6OA0GK2zNB8iRVGp\r\n/AEMP7RnJb6c+7KXXKAzw8GnZrA1F5iCjl+0Y/zze7UgyehNC+VtFPum6pyr\r\nJuXFnLA4t/Njmxm8beP3k+PYoDo524XqYGZfzBKBn+4js72lvGgVt3XACQBd\r\ncjoxFW8ZVZarvMZlnvpIaUIQRrinOPcT3wi7EwHpBnp9Nx1x3O2+fHLDBpPQ\r\nnHxW1IDIYZcKnqdC0U36wq6NP+KmKA7Yv3wq9blP8kB9Wid0j0WjEEj1u/ev\r\npDvmPnvRHKFG1ya57+g5Q/UYni8nBBhna2lgo8veTI695rlW0xaGnAt2fd1T\r\nDqSfC4x3/1vpoR3VIsomdQkMPOOa3RL3bGI=\r\n=XNDA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"b-zurg","email":"buzurg.arjmandi@gmail.com"},"directories":{},"maintainers":[{"name":"b-zurg","email":"buzurg.arjmandi@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-collapse-pane_3.0.0_1653136405537_0.11468025827780859"},"_hasShrinkwrap":false},"3.0.1":{"version":"3.0.1","license":"MIT","name":"react-collapse-pane","repository":{"type":"git","url":"git+https://github.com/b-zurg/react-collapse-pane.git"},"homepage":"https://b-zurg.github.io/react-collapse-pane/","bugs":{"url":"https://github.com/b-zurg/react-collapse-pane/issues"},"description":"The splittable, draggable and collapsible react layout library.","author":{"name":"Buzurgmehr Arjmandi"},"module":"dist/react-collapse-pane.esm.js","main":"dist/index.js","typings":"dist/index.d.ts","keywords":["react","react-component","split","pane","layout","collapse","typescript","splitter","splittable","collapsible","drag","draggable","dragging","panel","component"],"engines":{"node":">=10"},"scripts":{"start":"tsdx watch","build":"tsdx build","test":"tsdx test --passWithNoTests","lint":"tsdx lint","lint:fix":"tsdx lint --fix","prepare":"tsdx build","storybook":"start-storybook -p 6006","build-storybook":"build-storybook"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":100,"semi":true,"singleQuote":true,"trailingComma":"es5"},"dependencies":{},"devDependencies":{"@babel/core":"^7.18.0","@mui/material":"^5.8.0","@storybook/addon-actions":"^6.5.3","@storybook/addon-essentials":"^6.5.3","@storybook/addon-links":"^6.5.3","@storybook/react":"^6.5.3","@types/react":"^18.0.9","@types/react-dom":"^18.0.4","@types/styled-components":"^5.1.25","babel-loader":"^8.2.5","html-webpack-plugin":"^5.5.0","husky":"^6.0.0","react":"^18.1.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^18.1.0","react-is":"^18.1.0","styled-components":"^5.3.5","ts-loader":"^9.3.0","tsdx":"^0.14.1","tslib":"^2.4.0","typescript":"^4.6.4"},"peerDependencies":{"react":">=16","@mui/material":"^5.8.0"},"readme":"# react-collapse-pane\r\n\r\nThis is intended to be **the** simple, reliable, configurable, and elegant solution to having splittable, draggable and collapsible panes in your React application. \r\n\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n
\r\n\r\n## [[click for storybook demo]](https://storybook-collapse-pane.netlify.app/)\r\n## [[click for documentation site]](https://b-zurg.github.io/react-collapse-pane/)\r\n\r\n# Getting Started :rocket:\r\n\r\nInstall react-collapse-pane:\r\n```bash\r\nnpm i react-collapse-pane\r\n\r\n# or for yarn\r\n\r\nyarn add react-collapse-pane\r\n```\r\n\r\nOnce installed you can import the `SplitPane` component in your code.\r\n\r\n```ts\r\nimport { SplitPane } from \"react-collapse-pane\";\r\n```\r\n\r\nIf you're using Typescript the `SplitPaneProps`, as well as a few other helper types type is also available.\r\n\r\nNOTE: Since the upgrade to MUI v5 you need to install a peer dependency style engine. Since there is a decision between styled components and emotion I did not make this an explicit dependency.\r\n\r\nIf you want to simply use the default then follow the install guide here https://mui.com/material-ui/getting-started/installation/\r\nIf you want to use styled components then follow the configuration guide here https://mui.com/material-ui/guides/styled-engine/\r\n\r\nIn the future this dependency will be removed, apologies for the hassle while that gets sorted out. The next version will be much leaner.\r\n```ts\r\nimport { SplitPane, SplitPaneProps, ResizerOptions, CollapseOptions, SplitPaneHooks } from \"react-collapse-pane\";\r\n```\r\n# Quick Start Usage :fire:\r\n\r\nThe only component you must interact with is `SplitPane`. This serves as a wrapper for all of the children you wish to lay out.\r\n\r\nAll you're required to give is a `split` prop which can be either `\"horizontal\"` or `\"vertical\"`. This identifies what the orientation of the split panel will be.\r\n\r\n```tsx\r\n\r\n This is the first div
\r\n This is the second div
\r\n This is the third div
\r\n This is the fourth but not a div!\r\n\r\n```\r\n\r\nWhat you just did is make a split collapsible panel layout!\r\n\r\n## Congrats! That was easy! :grin:\r\n\r\nThis basically splits the children vertically (i.e. full-height split). The children can be any valid React child. If a child is `null` it will be excluded from being split or displayed.\r\n\r\nBy default there is a 1px divider with a grabbable surface of 1rem width or height (depending on the split). If you hover over the divider a button will appear that you can use to collapse the panel.\r\n\r\nThere is no limit to the number of elements you have as children. The `SplitPane` will split them all accordingly.\r\n\r\n## But what about *styling* the resizer, the buttons, controlling the animations, or *RTL* support? :sob:\r\n\r\nThis library supports all of these things and more! \r\n\r\nFor more details check out [the documentation](https://b-zurg.github.io/react-collapse-pane/)\r\n\r\n# Documentation\r\n\r\nDocumentation can be found at https://b-zurg.github.io/react-collapse-pane/ \r\n\r\nIf you notice an issue then please make an issue or a PR! All docs are generated from the `docs` folder in the master branch.\r\n\r\n# Contributing and PRs :sparkling_heart:\r\n\r\nIf you would like to contribute please check out the [contributor guide](/CONTRIBUTING.md)\r\n\r\nAll contributions are welcome! All issues and feature requests are welcome!\r\n\r\n# Credit and Attribution :pray:\r\n\r\nThis project did not start off from scratch. The foundation of the project was the excellently written [react-multi-split-pane](https://github.com/neoraider/react-multi-split-pane) library which is itself a typescript rewrite of the [react-split-pane](https://github.com/tomkp/react-split-pane) library. \r\n\r\nMuch gratitude to their authors, [@NeoRaider](https://github.com/NeoRaider) and [@tomkp](https://github.com/tomkp) \r\n\r\n## Contributors โจ\r\n\r\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\r\n","readmeFilename":"README.md","gitHead":"73e14b19e6cbe22ab127516cf9d504d30bc10624","_id":"react-collapse-pane@3.0.1","_nodeVersion":"12.22.7","_npmVersion":"6.14.15","dist":{"integrity":"sha512-+ojYrfAlzGcvI0T4PCUdyoP8Opl6MCgA4SeUIlu2CKpXM45Don0GdkHyGo4jkY3EYfQxHzp6eyPmj6wp8fxBSA==","shasum":"938821d70d98f680b1920b596324b33a7fdacb56","tarball":"https://registry.npmjs.org/react-collapse-pane/-/react-collapse-pane-3.0.1.tgz","fileCount":71,"unpackedSize":429516,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmIRITLiVaB7yIQPXujypQi8zwFZzmdHDmo/pWu+8DlQIhAJXTI8lhR0rhajluH2/krVdWj+28229SvlEsz4VifHpU"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiODrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2ThAAhFmD4tj+Tg9akVXzzJzAZn8UN7YrLrLFgpbLF0TTcoLrSOt1\r\n3rEjgFS+5LliHNgD+n7lNsfbC8O/rgtlHkY9EnZAZQvpcCtTZhZHGgq+EH7U\r\nX3RN4dOcWt/RYbwbEF9YevK5zM1GuUWVYwuT8/0jJKbKgXF/rBZ2MChAAodM\r\ntmN1s7g2NdlUjxiqP/KmSVZ3of1sJOFQOJttPpvCOP7Mp3aWcXjDM3pm+VG5\r\n2+nuTemfK3Z1One/ec/maFouFoRyYsQAFjikXkxy7uxaVsgZXHvVxma4oQv0\r\nrYBOBXvMI/FhzEEsEGyz+aCO+GfCDvl5/eyN9wjUY0SP93STAe0eqcmNDHna\r\nqJQKFyMfli6y9gnrim5iLF2C7myeglcvQRirO33fPEAlU30wEHu9F80KGOoV\r\nPIgxelc9gyK/tS43UR1Tdx60+CZNKPs7i1YW0VXoOr8cLIN+NO0UDgdXDMeT\r\nGe8nkPbIIScb5rzIBBdiuzp3RWQZuMYRwrf1LWR7UEC2kScrrfVSY5YnRfcS\r\n0RL6bgcfm+84auYEjAOznyMzhqlVV1/vJW+9OSEcrd1b4wb4WeNiA51/3/Qs\r\nj/2zK3dkEPK27wUTxZRxUY3v0CLGk2d71twnEV6Db6MA2ScCXK2F57401RNd\r\nwork/W9U4M2PsV3HClesKI4P3yhqGBEYR38=\r\n=JiFT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"b-zurg","email":"buzurg.arjmandi@gmail.com"},"directories":{},"maintainers":[{"name":"b-zurg","email":"buzurg.arjmandi@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-collapse-pane_3.0.1_1653137643172_0.8091385319435376"},"_hasShrinkwrap":false}},"time":{"created":"2020-06-17T14:26:54.549Z","1.0.0":"2020-06-17T14:26:54.757Z","modified":"2022-05-21T14:07:54.319Z","1.0.1":"2020-06-17T18:39:38.098Z","1.0.2":"2020-06-18T08:07:33.005Z","1.1.0":"2020-06-18T13:38:05.202Z","1.1.1":"2020-06-18T15:21:13.267Z","1.2.0":"2020-06-18T18:18:13.548Z","1.3.0":"2020-06-19T09:29:37.940Z","1.3.1":"2020-06-19T12:17:38.970Z","1.3.2":"2020-06-19T14:02:30.983Z","1.3.3":"2020-06-19T15:13:56.713Z","1.3.4":"2020-06-19T19:11:05.333Z","1.3.5":"2020-06-19T21:41:34.854Z","1.3.6":"2020-06-20T02:54:44.013Z","1.3.7":"2020-06-22T08:15:41.306Z","1.3.8":"2020-06-23T13:50:43.796Z","1.3.9":"2020-06-25T07:38:43.832Z","1.3.10":"2020-06-25T18:38:51.222Z","1.4.0":"2020-06-26T15:30:32.454Z","1.4.1":"2020-07-05T08:47:10.266Z","1.4.2":"2020-07-07T09:00:29.167Z","2.0.0":"2020-07-12T13:22:01.844Z","2.0.1":"2021-05-13T09:25:09.838Z","3.0.0":"2022-05-21T12:33:25.674Z","3.0.1":"2022-05-21T12:54:03.393Z"},"maintainers":[{"name":"b-zurg","email":"buzurg.arjmandi@gmail.com"}],"description":"The splittable, draggable and collapsible react layout library.","homepage":"https://collapse-pane.zurg.dev","repository":{"type":"git","url":"git+https://github.com/b-zurg/react-collapse-pane.git"},"author":{"name":"Buzurgmehr Arjmandi"},"bugs":{"url":"https://github.com/b-zurg/react-collapse-pane/issues"},"license":"MIT","readme":"","readmeFilename":"","keywords":["react","react-component","split","pane","layout","collapse","typescript","splitter","splittable","collapsible","drag","draggable","dragging","panel","component"]}![\"\"/](\"https://avatars3.githubusercontent.com/u/57298613?v=4\")
![\"\"/](\"https://avatars1.githubusercontent.com/u/54194733?v=4\")