{"_id":"@angrist99/splitter","name":"@angrist99/splitter","dist-tags":{"latest":"1.4.0"},"versions":{"1.4.0":{"name":"@angrist99/splitter","version":"1.4.0","description":"Create resizable split views - like in VS Code","license":"MIT","homepage":"https://github.com/DevbookHQ/splitter","author":{"name":"FoundryLabs, Inc.","email":"hello@usedevbook.com","url":"https://usedevbook.com"},"bugs":{"url":"https://github.com/DevbookHQ/splitter"},"repository":{"type":"git","url":"git+https://github.com/DevbookHQ/splitter.git"},"main":"lib/cjs/index.js","module":"lib/mjs/index.js","scripts":{"prepublishOnly":"rollup -c","build":"rollup -c","watch":"rollup -c -w"},"devDependencies":{"@babel/core":"^7.13.8","@rollup/plugin-babel":"^5.3.0","@types/node":"^12.20.4","@types/react":"^17.0.20","@types/react-dom":"^17.0.9","@types/react-is":"^17.0.3","autoprefixer":"^10.2.5","postcss":"^8.2.7","rollup":"^2.56.2","rollup-plugin-postcss":"^4.0.1","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.31.1","typescript":"^4.4.3"},"keywords":["devbook","react","resize","split"],"dependencies":{"react-is":"^17.0.2"},"directories":{"example":"example"},"_id":"@angrist99/splitter@1.4.0","gitHead":"f03ed625439f13c7a8117207aacecb3f0ed30b3a","types":"./lib/cjs/index.d.ts","_nodeVersion":"18.16.1","_npmVersion":"9.8.0","dist":{"integrity":"sha512-ZNcbXVK3iWI2Y1uVxRq7OCk3TmQWQSt7S/p+TSS6akvFt3R9dcYb7naWD1qlnasAwX7aDPQiECkBGOKxpzUeQQ==","shasum":"02c265f7d7ae3dfa552bc9a4a50eb076c27a0388","tarball":"https://registry.npmjs.org/@angrist99/splitter/-/splitter-1.4.0.tgz","fileCount":27,"unpackedSize":123478,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWzMiTTTJ4SfImmmVNUGFIJbPEdjizuPBF74ddFYVjnAIhAP4QWsrurPDlYZsCjqpl2Wjbya1j1HAuFePim49m3+QM"}]},"_npmUser":{"name":"angrist99","email":"Peter.drevicky@gmail.com"},"maintainers":[{"name":"angrist99","email":"Peter.drevicky@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/splitter_1.4.0_1689757009753_0.2974239177273861"},"_hasShrinkwrap":false}},"time":{"created":"2023-07-19T08:56:49.665Z","1.4.0":"2023-07-19T08:56:49.895Z","modified":"2023-07-19T08:56:50.240Z"},"maintainers":[{"name":"angrist99","email":"Peter.drevicky@gmail.com"}],"description":"Create resizable split views - like in VS Code","homepage":"https://github.com/DevbookHQ/splitter","keywords":["devbook","react","resize","split"],"repository":{"type":"git","url":"git+https://github.com/DevbookHQ/splitter.git"},"author":{"name":"FoundryLabs, Inc.","email":"hello@usedevbook.com","url":"https://usedevbook.com"},"bugs":{"url":"https://github.com/DevbookHQ/splitter"},"license":"MIT","readme":"# Splitter\r\nSplitter is a React component that allows you to split views into resizable panels. Similar to tabs in Visual Studio Code, for example.\r\nHere's a gif of what you can build with Splitter:\r\n![](example.gif)\r\n\r\nSplitter is inspired by [Split.js](https://split.js.org/) and written as 100% functional component:\r\n- All size calculation is done through CSS using `calc` with minimal JS. This makes it much faster\r\n- Fully responsive\r\n- No dependencies beside React\r\n- Minimal assumptions about your styling and views\r\n\r\n[CodeSandbox project](https://codesandbox.io/s/devbookhqspliiter-example-l23s4)\r\n\r\n## Installing\r\n```\r\nnpm install @devbookhq/splitter\r\n# or\r\nyarn add @devbookhq/splitter\r\n```\r\n\r\n## Usage\r\n\r\n### Horizontal split\r\n```tsx\r\nimport Splitter, { SplitDirection } from '@devbookhq/splitter'\r\n\r\nfunction MyComponent() {\r\n  return (\r\n    <Splitter>\r\n      <div>Tile 1</div>\r\n      <div>Tile 2</div>\r\n    </Splitter>\r\n  );\r\n}\r\n```\r\n\r\n### Vertical split\r\n```tsx\r\nimport Splitter, { SplitDirection } from '@devbookhq/splitter'\r\n\r\nfunction MyComponent() {\r\n  return (\r\n    <Splitter direction={SplitDirection.Vertical}>\r\n      <div>Tile 1</div>\r\n      <div>Tile 2</div>\r\n    </Splitter>\r\n  );\r\n}\r\n```\r\n\r\n### Nested split\r\n```tsx\r\nimport Splitter, { SplitDirection } from '@devbookhq/splitter'\r\n\r\nfunction MyComponent() {\r\n  return (\r\n    <Splitter direction={SplitDirection.Vertical}>\r\n      <div>Tile 1</div>\r\n      <Splitter direction={SplitDirection.Horizontal}>\r\n        <div>Tile 2</div>\r\n        <Splitter direction={SplitDirection.Vertical}>\r\n          <div>Tile 3</div>\r\n          <div>Tile 4</div>\r\n        </Splitter>\r\n      </Splitter>\r\n    </Splitter>\r\n  );\r\n}\r\n```\r\n\r\n### Get sizes of tiles\r\n```tsx\r\nimport Splitter, { SplitDirection } from '@devbookhq/splitter'\r\n\r\nfunction MyComponent() {\r\n  function handleResizeStarted(gutterIdx: number) {\r\n    console.log('Resize started!', gutterIdx);\r\n  }\r\n  function handleResizeFinished(gutterIdx: number, newSizes: number[]) {\r\n    console.log('Resize finished!', gutterIdx, newSizes);\r\n  }\r\n\r\n  return (\r\n    <Splitter\r\n      direction={SplitDirection.Vertical}\r\n      onResizeStarted={handleResizeStarted}\r\n      onResizeFinished={handleResizeFinished}\r\n    >\r\n      <div>Tile 1</div>\r\n      <div>Tile 2</div>\r\n    </Splitter>\r\n  );\r\n}\r\n```\r\n\r\nTo see more examples check out the [examples](#Example) section.\r\n\r\n## Examples\r\nCheck the [`example`](./example/src/App.tsx) folder or the [CodeSandbox project](https://codesandbox.io/s/devbookhqspliiter-example-l23s4).\r\n- [Horizontal](./example/src/HorizontalSplit/index.tsx)\r\n- [Vertical](./example/src/VerticalSplit/index.tsx)\r\n- [Nested](./example/src/NestedSplit/index.tsx)\r\n- [Styled gutter](./example/src/StyledGutter/index.tsx)\r\n- [Minimal tile size](./example/src/MinSize/index.tsx)\r\n- [Initial tile sizes](./example/src/InitialSizes/index.tsx)\r\n- [Scrollable tiles](./example/src/ScrollableChildren/index.tsx)\r\n- [Get sizes of tiles](./example/src/OnDidResize/index.tsx)\r\n\r\n","readmeFilename":"README.md"}