SplitContainer - Getting started
Zippytech React Toolkit is distributed via npm. So getting it installed is as easy as:
$ npm install @zippytech/react-toolkit --save
Or, if you are using yarn you have to run:
$ yarn add @zippytech/react-toolkit
To start using the <SplitContainer /> component, all you need to import is React, the code and styles of the component itself: @zippytech/react-toolkit/SplitContainer and @zippytech/react-toolkit/SplitContainer/index.css.
This is the most basic setup for a <SplitContainer />. In the following sections we'll explore how to use the <SplitContainer /> in various scenarios, supported props, theming, collapsing/expanding sides, configuring the split position and others.
A <SplitContainer /> component is a container with two sides separated by a draggable split-bar. It supports both "vertical" and"horizontal" orientation.
Whenever possible, you should try to have only one child inside every side of the <SplitContainer /> component and nest everything else inside that one child. This way, you can avoid edge cases with collapse/expand transitions, which may occur due to the having multiple children with multiple sizes.
When you use a <SplitContainer />, the most basic things you want it to do is to configure the orientation, the split position and the content inside the two sides of the container.
Use the bordered boolean prop to show a 1px border around the SplitContainer.
The snippet above, renders a <div /> html tag with the zippy-react-toolkit-split-container className. All components in the toolkit use the BEM css convention, and their css classes are prefixed with zippy-react-toolkit-. You can read more about BEM theming.
Sometimes it's useful to have sides inside the <SplitContainer /> fill all available space. For this, you can use fillSides=true in order to make building app-like layouts easier.
However, most often it's probably a good idea to use fillSides=false (which is the default) - each <Side /> of the <SplitContainer /> has a width:100% style, so scrollbars are shown appropriately when content overflows. The example below shows example usage for fillSides=true. When using fillSides=true, the content inside each <Side /> has to manage overflowing content, by specifically adding overflow: auto.
One of the most important properties in the <SplitContainer /> is the splitAt prop . It specifies the position of the split-bar and which side of the container is flexible.
The splitAt prop is a controlled prop. Make sure you specify onResize(splitAt) and update the splitAt value when resizing happens - otherwise, the split position won't be updated.
For uncontrolled behaviour, see defaultSplitAt.
Specifying the orientation of the SplitContainer is as simple as giving the orientation a value from one of the following:
  • "horizontal" - this is the default value. The split-bar is horizontal, splitting the container into two areas: top and bottom.
  • "vertical" - the split-bar is vertical, splitting the container into two areas: left and right.
splitAt supports the following values:
  • numbers - one of the sides is fixed to the specified size, the other is flexible.
  • percentages - both sides are flexible.
  • auto sizing - the SplitContainer fits one side of the container to accommodate the auto size of the contained HTMLElement.
You can read more about splitting the container at configuring the split position.
The <SplitContainer /> also supports collapsing any of the sides of the container & locking the container.
In the following snippet, the <SplitContainer /> is both collapsed & locked, so no expand/resize interaction is possible. The snippet below uses defaultCollapsedIndex=1 to collapse the second side, and locked=true to specify that the <SplitContainer /> should be locked.
You can read more about specifying a collapsedIndex at collapsing and locking.
You can style <SplitContainer /> components as you style any other React component, using either the className prop or the style prop for inline styling. Additionally, you can target zippy-react-toolkit-split-container in your css code to do additional styling.
<SplitContainer style={{ border: '1px solid red' }} className="my-custom-splitter" />
Additionally, you can use the two sides of the container to style each of the sides separately.