\n\n\n- **React-based:** Integrate effortlessly into your existing React-based application.\n- **Industry standard look and feel:** Like VS Code's split view implementation? You're in luck! This component is derived from the same codebase.\n- **Dynamic:** Want to declaratively add and remove panes? We've got you covered.\n\n## Examples\n\nYou can find examples of using the library [here](https://allotment-storybook.netlify.app/).\n\n## Getting Started\n\nAllotment is available from npm.\n\n### Prerequisites\n\nAllotment has `react` and `react-dom` as peer dependencies.\n\n```sh\nnpm install react react-dom\n```\n\n### Installation\n\n```sh\nnpm install allotment\n```\n\n## Usage\n\n```jsx\nimport React from \"react\";\nimport { Allotment } from \"allotment\";\nimport \"allotment/dist/style.css\";\n\nexport const App = () => (\n \n \n \n \n);\n```\n\nIf you want more control over the behaviour of the individual panes you can use the `Allotment.Pane` component. This includes setting the minimum and maximum size of a pane, as well as whether to enable snapping behaviour.\n\n```jsx\n\n \n \n \n \n \n \n\n```\n\n## Allotment props\n\nAll properties are optional.\n\n### defaultSizes\n\nAn array of initial sizes of the panes. If the sum of the sizes differs from the size of the container then the panes' sizes will be scaled proportionally.\n\n```jsx\n\n \n \n\n```\n\n### maxSize (default: `Infinity`)\n\nMaximum size of any pane.\n\n### minSize (default: `30`)\n\nMinimum size of any pane.\n\n### proportionalLayout (default: `true`)\n\nResize each view proportionally when resizing container.\n\n### separator (default: `true`)\n\nWhether to render a separator between panes.\n\n### snap (default: `false`)\n\nEnable snap to zero for all panes.\n\n### vertical (default: `false`)\n\nDirection to split. If true then the panes will be stacked vertically, otherwise they will be stacked horizontally.\n\n### onChange\n\nCallback that is fired when the pane sizes change (usually on drag). Recommended to add a debounce function to rate limit the callback. Passed an array of numbers.\n\n### onDragStart\n\nCallback that is fired when the user clicks on the sash\n\n### onDragEnd\n\nCallback that is fired when the user stops clicking the sash\n\n### onReset\n\nCallback that is fired whenever the user double clicks a sash.\n\n### onVisibleChange\n\nCallback that is fired whenever the user changes the visibility of a pane by snapping. Note that this will only be called if the new value is different from the current `visible` prop on the Pane.\n\n## Allotment.Pane props\n\n### maxSize\n\nMaximum size of this pane. Overrides `maxSize` set on parent component.\n\n### minSize\n\nMinimum size of this pane. Overrides `minSize` set on parent component.\n\n### priority\n\nThe priority of the pane when the layout algorithm runs. Panes with higher priority will be resized first.\n\nOnly used when `proportionalLayout` is false.\n\n### preferredSize\n\nPreferred size of this pane. Allotment will attempt to use this size when adding this pane (including on initial mount) as well as when a user double clicks a sash, or the `reset` method is called on the Allotment instance.\n\nThe size can either be a number or a string. If it is a number it will be interpreted as a number of pixels. If it is a string it should end in either \"px\" or \"%\". If it ends in \"px\" it will be interpreted as a number of pixels, e.g. \"120px\". If it ends in \"%\" it will be interpreted as a percentage of the size of the Allotment component, e.g. \"50%\".\n\n### snap\n\nEnable snap to zero for this pane. Overrides `snap` set on parent component.\n\n### visible\n\nWhether the pane should be visible.\n\n## Styling\n\nAllotment uses [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for styling.\nYou can customize the following default variables.\n\n```css\n:root {\n --focus-border: #007fd4;\n --separator-border: #838383;\n}\n```\n\nTo control the feedback area size of the dragging area between panes you can call the exported `setSashSize` function with desired size in pixels. Set it to a larger value if you feel it's hard to resize the panes using the mouse. On touch devices the feedback area is always set to 20 pixels\n\n### Programmatic control\n\nYou can use a ref to get access to the Allotment component instance and call its reset and resize methods manually:\n\n```jsx\nconst ref = React.useRef(ref);\n\nreturn (\n
\n);\n```\n\n## Frequently asked questions\n\n### It's not working/I don't see anything\n\nThe Allotment component takes its width and height from the element which contains it. It does not come with an explicit width or height out of the box. It's easy to end up with a div of height zero by accident. For example, adding allotment to a brand new Create React App project without setting a height on a containing div won't work because the default root div itself has no height.\n\nYou should also check that the css has been imported/included, for example at the root of your application:\n\n```jsx\nimport \"allotment/dist/style.css\";\n```\n\n### My content is larger than the containing pane. How can I let the user scroll?\n\nThe simplest approach is to place your content inside a new div with width and height `100%` and overflow `auto`. This div will have the same dimensions as the pane it's inside and if its content overflows the browser will provide scrolling behaviour.\n\n### Next.js\n\nIf you get an error when importing allotment in a Next.js project consider [not including the module server-side](https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr). Allotment currently only works in a browser. It might be possible to produce sensible results server-side in the future so create an issue requesting this if interested.\n\n### How do I prevent a pane from being resized?\n\nSet `minSize` and `maxSize` props to the same value.\n\n### How do I style the component?\n\nSome common style changes can be made by setting CSS variables.\n\nThese include:\n\n| Name | Default | Description |\n| :------------------- | :-------------------------- | :----------------------------- |\n| `--focus-border` | `#007fd4` | Color of the sash when hovered |\n| `--separator-border` | `rgba(128, 128, 128, 0.35)` | Color of the separator |\n\nFor more involved styling you can target the component's child elements.\n\n| Class | Description |\n| :----------------------------- | :-------------------------------------------------------------- |\n| `.split-view` | Styles applied to the top-level container |\n| `.split-view-horizontal` | Styles applied to the top-level container if `vertical={false}` |\n| `.split-view-vertical` | Styles applied to the top-level container if `vertical={true}` |\n| `.split-view-separator-border` | Styles applied to the top-level container if `separator={true}` |\n| `.split-view-sash-dragging` | Styles applied to the top-level container if sash is dragging |\n| `.sash-container` | Styles applied to the sash container |\n| `.sash` | Styles applied to the sash |\n| `.sash-active` | Styles applied to the sash if being dragged |\n| `.sash-disabled` | Styles applied to the sash if disabled |\n| `.sash-horizontal` | Styles applied to the sash if `vertical={false}` |\n| `.sash-hover` | Styles applied to the sash if being hovered over |\n| `.sash-mac` | Styles applied to the sash if running under macos |\n| `.sash-maximum` | Styles applied to the sash if the pane is maximised |\n| `.sash-minimum` | Styles applied to the sash if the pane is minimised |\n| `.sash-vertical` | Styles applied to the sash if `vertical={true}` |\n| `.split-view-container` | Styles applied to the split view container |\n| `.split-view-view` | Styles applied to the split view view |\n| `.split-view-view-visible` | Styles applied to the split view view if `visible={true}` |\n","readmeFilename":"README.md"}
![\"Logo\"](\"./assets/logo.svg\"){kind=logo}
\n \n \n ![](\"https://user-images.githubusercontent.com/981531/161631194-1e24ea10-f46a-42db-bfdb-89bcfa3fc50b.gif\")
\n