Top
SplitContainer API - API
SplitContainer API
Props (20)
Callback Props (3)
Styling Props (3)
Methods (7)
Below you can find a list of public props that the <SplitContainer /> supports. Besides this list, the component also supports all standard DOM attributes - those are not explicitly mentioned here, with a few exceptions.
SplitContainer.Side
default: undefined
Use this prop to specify the contents inside each side of the container.
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.
import React from 'react'
import SplitContainer from '@zippytech/react-toolkit/SplitContainer'
import '@zippytech/react-toolkit/SplitContainer/index.css'

const firstSide = <div style={{ display: 'inline-block'}}>
  <p>
    Zippytech React Toolkit is designed to be a comprehensive set of rich UI
    components built with React and that can be easily integrated into
    existing or new applications.
  </p>
  <p>
    We've gone through a lot of iterations to make sure we provide a rich
    and flexible component set that is actually useful and help you
    speed-up app development.
  </p>
  <p>
    We focus on building components, so you can focus on what actually
    matters to you - building & shipping your app faster to the market.
  </p>
  <p>
    You can navigate this documentation either by using the side menu on
    the left, or the next/prev links below, or you can press the{' '}
    <code>n</code> key (from next) or the <code>p</code> key (from prev)
    to navigate to the next/prev page in the docs.
  </p>
</div>

const secondSide = <div>
  <p>
    When we started building the toolkit, we've made a checklist of
    features that our components need to include out-of-the-box:
  </p>
  <ul>
    <li>
      <b>Performance</b> - a component is only useful if it does its job
      quickly. This will generally not be a problem with smaller
      components like buttons, dialogs, color pickers, etc - but menus,
      lists and grids need a lot of performance considerations in order
      to be really snappy.
    </li>

    <li>
      <b>Flexibility & extensibility</b> - all components need to be
      very flexible in adapting to a wide spectrum of needs. Changing
      some styles, replacing some rendering logic or adding a custom
      validation should all be possible and easily achievable.
    </li>
  </ul>
</div>

export default () => {
  return <div>
    <SplitContainer orientation="horizontal" style={{ height: 500 }}>
      <SplitContainer.Side
        children={firstSide}
        style={{ padding: 10, background: '#d1dae0', color: '#1F2D3D' }}
      />

      <SplitContainer.Side
        children={secondSide}
        style={{ padding: 10, background: '#556a8e', color: 'white' }}
      />
    </SplitContainer>
  </div>
}
Either use the Side named import or SplitContainer.Side for specifying the sides of the container.
You can also configure the splitbar inside the <SplitContainer />:
import React from 'react'
import SplitContainer, { Splitter, Side } from '@zippytech/react-toolkit/SplitContainer'
import '@zippytech/react-toolkit/SplitContainer/index.css'

export default () => {
  return <div>
    <SplitContainer
      orientation="vertical"
      defaultSplitAt="50%"
      minSize={50}
      style={{ height: 500 }}
    >
      <Side style={{ padding: 10, background: '#d1dae0', color: '#1F2D3D' }} >
        <div>
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI
            components built with React and that can be easily integrated into
            existing or new applications.
          </p>
          <p>
            We've gone through a lot of iterations to make sure we provide a rich
            and flexible component set that is actually useful and help you
            speed-up app development.
          </p>
          <p>
            We focus on building components, so you can focus on what actually
            matters to you - building & shipping your app faster to the market.
          </p>
          <p>
            You can navigate this documentation either by using the side menu on
            the left, or the next/prev links below, or you can press the{' '}
            <code>n</code> key (from next) or the <code>p</code> key (from prev)
            to navigate to the next/prev page in the docs.
          </p>
        </div>
      </Side>

      <Splitter style={{ background: '#1e271e' }} rootClassName="" size={25} />

      <Side style={{ padding: 10, background: '#556a8e', color: 'white' }} >
        <div>
          <p>
            When we started building the toolkit, we've made a checklist of
            features that our components need to include out-of-the-box:
          </p>
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job
              quickly. This will generally not be a problem with smaller
              components like buttons, dialogs, color pickers, etc - but menus,
              lists and grids need a lot of performance considerations in order
              to be really snappy.
            </li>

            <li>
              <b>Flexibility & extensibility</b> - all components need to be
              very flexible in adapting to a wide spectrum of needs. Changing
              some styles, replacing some rendering logic or adding a custom
              validation should all be possible and easily achievable.
            </li>
          </ul>
        </div>
      </Side>
    </SplitContainer>
  </div>
}
Number
default: undefined
Use this prop if you want to render one of the sides as collapsed.
This is an controlled prop. Clicking the expand tool on the splitbar will only expand the collapsed side if you update the value of collapsedIndex using onExpand callback prop.
For the uncontrolled version of this props, see defaultCollapsedIndex.
Possible values are 0 and 1 - so either of the two sides can be rendered as collapsed initially.
import React from 'react'
import SplitContainer from '@zippytech/react-toolkit/SplitContainer'
import '@zippytech/react-toolkit/SplitContainer/index.css'

import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      collapsedIndex: null
    }
  }

  render() {
    return <div>
      <p>
        Currently collapsed index: <code>{JSON.stringify(this.state.collapsedIndex)}</code>
      </p>
      <SplitContainer
        style={{ height: 560}}
        collapsedIndex={this.state.collapsedIndex}
        onExpand={() => {
          zippy.notification.first.addNotification({
            content: 'onExpand called'
          });
          this.setState({
            collapsedIndex: null
          })
        }}
        onCollapse={(index) => {
          zippy.notification.first.addNotification({
            content: 'onCollapse called'
          });
          this.setState({
            collapsedIndex: index
          })
        }}

        defaultSplitAt="50%"
        orientation="vertical"
        minSize={50}
        style={{ height: 500 }}
      >
        <SplitContainer.Side style={{ padding: 10, background: '#d1dae0', color: '#1F2D3D' }}>
          <div>
            <p>
              Zippytech React Toolkit is designed to be a comprehensive set of rich UI
              components built with React and that can be easily integrated into
              existing or new applications.
            </p>
            <p>
              We've gone through a lot of iterations to make sure we provide a rich
              and flexible component set that is actually useful and help you
              speed-up app development.
            </p>
            <p>
              We focus on building components, so you can focus on what actually
              matters to you - building & shipping your app faster to the market.
            </p>
            <p>
              You can navigate this documentation either by using the side menu on
              the left, or the next/prev links below, or you can press the{' '}
              <code>n</code> key (from next) or the <code>p</code> key (from prev)
              to navigate to the next/prev page in the docs.
            </p>
          </div>
        </SplitContainer.Side>
        <SplitContainer.Side style={{ padding: 10, background: '#556a8e', color: 'white' }}>
          <div>
            <p>
              When we started building the toolkit, we've made a checklist of
              features that our components need to include out-of-the-box:
            </p>
            <ul>
              <li>
                <b>Performance</b> - a component is only useful if it does its job
                quickly. This will generally not be a problem with smaller
                components like buttons, dialogs, color pickers, etc - but menus,
                lists and grids need a lot of performance considerations in order
                to be really snappy.
              </li>

              <li>
                <b>Flexibility & extensibility</b> - all components need to be
                very flexible in adapting to a wide spectrum of needs. Changing
                some styles, replacing some rendering logic or adding a custom
                validation should all be possible and easily achievable.
              </li>
            </ul>
          </div>
        </SplitContainer.Side>
      </SplitContainer>
      <NotificationBoard id="first" />
    </div>
  }
}
export default () => <App />
Array[Bool]
default: [true, true]
Determines which sides of the container are collapsible. By default, both sides of the <SplitContainer /> can be collapsed.
For controlling the drag behaviour of the splitbar, see draggable.
import React from 'react'
import SplitContainer from '@zippytech/react-toolkit/SplitContainer'
import '@zippytech/react-toolkit/SplitContainer/index.css'

export default () => {
  return <div>
    <SplitContainer
      collapsible={[true, false]}
      defaultSplitAt="50%"
      bordered
      orientation="vertical"
      minSize={50}
      style={{ height: 500 }}
    >
      <SplitContainer.Side style={{ padding: 10, background: '#d1dae0', color: '#1F2D3D' }} >
        <p>
          Zippytech React Toolkit is designed to be a comprehensive set of rich UI
          components built with React and that can be easily integrated into
          existing or new applications.
        </p>
        <p>
          We've gone through a lot of iterations to make sure we provide a rich
          and flexible component set that is actually useful and help you
          speed-up app development.
        </p>
        <p>
          We focus on building components, so you can focus on what actually
          matters to you - building & shipping your app faster to the market.
        </p>
        <p>
          You can navigate this documentation either by using the side menu on
          the left, or the next/prev links below, or you can press the{' '}
          <code>n</code> key (from next) or the <code>p</code> key (from prev)
          to navigate to the next/prev page in the docs.
        </p>
      </SplitContainer.Side>

      <SplitContainer.Side style={{ padding: 10, background: '#556a8e', color: 'white' }} >
        <p>
          When we started building the toolkit, we've made a checklist of
          features that our components need to include out-of-the-box:
        </p>
        <ul>
          <li>
            <b>Performance</b> - a component is only useful if it does its job
            quickly. This will generally not be a problem with smaller
            components like buttons, dialogs, color pickers, etc - but menus,
            lists and grids need a lot of performance considerations in order
            to be really snappy.
          </li>

          <li>
            <b>Flexibility & extensibility</b> - all components need to be
            very flexible in adapting to a wide spectrum of needs. Changing
            some styles, replacing some rendering logic or adding a custom
            validation should all be possible and easily achievable.
          </li>
        </ul>
      </SplitContainer.Side>
    </SplitContainer>
  </div>
}
Number
default: undefined
Use this prop if you want to render one of the sides as collapsed by default.
This is an uncontrolled prop. Clicking the expand tool on the splitbar will expand the collapsed side and update the internal state of the component to reflect the change and render the SplitContainer with both sides expanded.
For the uncontrolled version of this props, see collapsedIndex.
Possible values are 0 and 1 - so either of the two sides can be rendered as collapsed initially.
import React from 'react'
import SplitContainer from '@zippytech/react-toolkit/SplitContainer'
import '@zippytech/react-toolkit/SplitContainer/index.css'

export default () => {
  return <div>
    <SplitContainer
      defaultCollapsedIndex={0}
      defaultSplitAt="50%"
      bordered
      orientation="vertical"
      minSize={50}
      style={{ height: 500 }}
    >
      <SplitContainer.Side style={{ padding: 10, background: '#d1dae0', color: '#1F2D3D' }} >
        <div>
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI
            components built with React and that can be easily integrated into
            existing or new applications.
          </p>
          <p>
            We've gone through a lot of iterations to make sure we provide a rich
            and flexible component set that is actually useful and help you
            speed-up app development.
          </p>
          <p>
            We focus on building components, so you can focus on what actually
            matters to you - building & shipping your app faster to the market.
          </p>
          <p>
            You can navigate this documentation either by using the side menu on
            the left, or the next/prev links below, or you can press the{' '}
            <code>n</code> key (from next) or the <code>p</code> key (from prev)
            to navigate to the next/prev page in the docs.
          </p>
        </div>
      </SplitContainer.Side>

      <SplitContainer.Side style={{ padding: 10, background: '#556a8e', color: 'white' }} >
        <div>
          <p>
            When we started building the toolkit, we've made a checklist of
            features that our components need to include out-of-the-box:
          </p>
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job
              quickly. This will generally not be a problem with smaller
              components like buttons, dialogs, color pickers, etc - but menus,
              lists and grids need a lot of performance considerations in order
              to be really snappy.
            </li>

            <li>
              <b>Flexibility & extensibility</b> - all components need to be
              very flexible in adapting to a wide spectrum of needs. Changing
              some styles, replacing some rendering logic or adding a custom
              validation should all be possible and easily achievable.
            </li>
          </ul>
        </div>
      </SplitContainer.Side>
    </SplitContainer>
  </div>
}
Number|String
default: undefined
Uncontrolled version of splitAt.
Specifies the default/initial position of the split-bar - the point where to split the container.
This is an uncontrolled prop. As a result, you don't have to update its value when onResize happens - the split position will be updated accordingly in the component internal state and be reflected in the UI.
For controlled behaviour, use splitAt.
Possible values are:
  • numbers - positive or negative.
    When a positive number is used, the splitbar will be positioned at the specified offset starting from the first side border.
    When a negative number is used, the splitbar will be positioned at the specified offset starting from the second side border.
  • percentages - positive or negative
    When a positive percentage (eg: "30%") is specified, the splitbar will be positioned at the specified offset from the first side border.
    When a negative percentage (eg: "-30%") is specified, the splitbar will be positioned at the specified offset starting from the second side border.
  • "auto" or "-auto"
    When "auto" is specified, the first side of the <SplitContainer /> will adjust the auto size of the first side of the container. The second side will fill all the remaining available space.
    When "-auto" is specified, the second side of the <SplitContainer /> will adjust the auto size of the second side of the container. The first side will fill all the remaining available space.
As a general rule, when defaultSplitAt is negative (or starts with a -), the second side of the container is used as a reference - so -300 means the second side will be 300px in size, while the first side will fill all the remaining available space.
import React from 'react'
import SplitContainer from '@zippytech/react-toolkit/SplitContainer'
import '@zippytech/react-toolkit/SplitContainer/index.css'

export default () => {
  return <div>
    <SplitContainer
      defaultSplitAt="-30%"
      bordered
      orientation="vertical"
      minSize={50}
      style={{ height: 500 }}
    >
      <SplitContainer.Side style={{ padding: 10, background: '#d1dae0', color: '#1F2D3D' }} >
        <div>
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI
            components built with React and that can be easily integrated into
            existing or new applications.
          </p>
          <p>
            We've gone through a lot of iterations to make sure we provide a rich
            and flexible component set that is actually useful and help you
            speed-up app development.
          </p>
          <p>
            We focus on building components, so you can focus on what actually
            matters to you - building & shipping your app faster to the market.
          </p>
          <p>
            You can navigate this documentation either by using the side menu on
            the left, or the next/prev links below, or you can press the{' '}
            <code>n</code> key (from next) or the <code>p</code> key (from prev)
            to navigate to the next/prev page in the docs.
          </p>
        </div>
      </SplitContainer.Side>

      <SplitContainer.Side style={{ padding: 10, background: '#556a8e', color: 'white' }} >
        <div>
          <p>
            When we started building the toolkit, we've made a checklist of
            features that our components need to include out-of-the-box:
          </p>
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job
              quickly. This will generally not be a problem with smaller
              components like buttons, dialogs, color pickers, etc - but menus,
              lists and grids need a lot of performance considerations in order
              to be really snappy.
            </li>

            <li>
              <b>Flexibility & extensibility</b> - all components need to be
              very flexible in adapting to a wide spectrum of needs. Changing
              some styles, replacing some rendering logic or adding a custom
              validation should all be possible and easily achievable.
            </li>
          </ul>
        </div>
      </SplitContainer.Side>
    </SplitContainer>
  </div>
}
With the snippet above, if the <SplitContainer /> were to be flexible in height, the second side of the container would always remain 200px in height, while the first side will always fill the remaining available space.
Bool
default: true
Determines if the <SplitContainer /> splitbar is draggable or not.
For controlling the collapse/expand behaviour of sides, see collapsible.
import React from 'react'
import SplitContainer from '@zippytech/react-toolkit/SplitContainer'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/SplitContainer/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      draggable: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.draggable}
          onChange={(draggable) => this.setState({ draggable })}
        >
          Draggable
        </CheckBox>
      </div>
      <SplitContainer
        draggable={this.state.draggable}
        defaultSplitAt="50%"
        bordered
        orientation="vertical"
        minSize={50}
        style={{ height: 500 }}
      >
        <SplitContainer.Side style={{ padding: 10, background: '#d1dae0', color: '#1F2D3D' }} >
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI
            components built with React and that can be easily integrated into
            existing or new applications.
          </p>
          <p>
            We've gone through a lot of iterations to make sure we provide a rich
            and flexible component set that is actually useful and help you
            speed-up app development.
          </p>
          <p>
            We focus on building components, so you can focus on what actually
            matters to you - building & shipping your app faster to the market.
          </p>
          <p>
            You can navigate this documentation either by using the side menu on
            the left, or the next/prev links below, or you can press the{' '}
            <code>n</code> key (from next) or the <code>p</code> key (from prev)
            to navigate to the next/prev page in the docs.
          </p>
        </SplitContainer.Side>

        <SplitContainer.Side style={{ padding: 10, background: '#556a8e', color: 'white' }} >
          <p>
            When we started building the toolkit, we've made a checklist of
            features that our components need to include out-of-the-box:
          </p>
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job
              quickly. This will generally not be a problem with smaller
              components like buttons, dialogs, color pickers, etc - but menus,
              lists and grids need a lot of performance considerations in order
              to be really snappy.
            </li>

            <li>
              <b>Flexibility & extensibility</b> - all components need to be
              very flexible in adapting to a wide spectrum of needs. Changing
              some styles, replacing some rendering logic or adding a custom
              validation should all be possible and easily achievable.
            </li>
          </ul>
        </SplitContainer.Side>
      </SplitContainer>
    </div>
  }
}

export default () => <App />
Bool
default: true
Makes the <SplitContainer /> support resizing, collapsing and expanding via keyboard events. By default, adds tabIndex=0 to the <SplitContainer /> element, which you can override by passing in another value for tabIndex.
Here's the list of keyboard shortcuts you can use:
  • SHIFT + arrow key - resizes in the arrow key direction. Use shiftResizeStep to configure the amount of resizing on a key press.
  • Control (Cmd on MacOS) + arrow key - collapses in the arrow key direction.
If there are multiple nested <SplitContainer /> components, the key event propagates from bottom to top.
For example in the snippet below, if you click the main content area, the innermost <SplitContainer /> is focused. Yet, if you press press SHIFT + ArrowLeft , its parent <SplitContainer /> is resized, with its left side being made smaller, since the innermost <SplitContainer /> has no left side to resize.
import React from 'react'
import SplitContainer, { Side } from '@zippytech/react-toolkit/SplitContainer'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/SplitContainer/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state ={
      enableKeyboardNavigation: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.enableKeyboardNavigation}
          onChange={(enableKeyboardNavigation) => this.setState({ enableKeyboardNavigation })}
        >
          Enable keyboard navigation
        </CheckBox>
      </div>
      <SplitContainer
        bordered
        enableKeyboardNavigation={this.state.enableKeyboardNavigation}
        orientation="vertical"
        minSize="10%"
        maxSize={['50%', null]}
        defaultSplitAt="auto"
        collapsible={[true, false]}
        style={{ height: 500 }}
      >
        <Side style={{ padding: 10, background: '#ca7768', color: 'white' }}>
          <div style={{ display: 'inline-block' }}>
            <h3>Components:</h3>
            <ul>
              <li>Accordion</li>
              <li>Button</li>
              <li>CheckBox</li>
              <li>ColorPicker</li>
              <li>ComboBox</li>
              <li>LoadMask</li>
              <li>Menu</li>
              <li>Notification</li>
              <li>Panel</li>
              <li>SplitContainer</li>
              <li>Window</li>
            </ul>
          </div>
        </Side>

        <SplitContainer orientation="vertical" defaultSplitAt="-30%" enableKeyboardNavigation={this.state.enableKeyboardNavigation}>
          <Side>
            <SplitContainer
              orientation="horizontal"
              defaultSplitAt="-auto"
              collapsible={[false, true]}
              enableKeyboardNavigation={this.state.enableKeyboardNavigation}
            >
              <Side
                style={{
                  padding: 10,
                  background: 'white',
                  color: '#1F2D3D'
                }}
              >
                <h1>React-toolkit features</h1>
                <p>
                  When we started building the toolkit, we've made a checklist of
                  features that our components need to include out-of-the-box:
                </p>
                <ul>
                  <li>
                    <b>Performance</b> - a component is only useful if it does its job
                    quickly. This will generally not be a problem with smaller
                    components like buttons, dialogs, color pickers, etc - but menus,
                    lists and grids need a lot of performance considerations in order
                    to be really snappy.
                  </li>

                  <li>
                    <b>Simplicity</b> - components need to be simple to use in the
                    most common scenario. For this, default values for components have
                    been carefully considered, so you need to add a minimum of code
                    when you want to add some custom property and/or logic.
                  </li>

                  <li>
                    <b>Look & feel</b> - by default, components need to look carefully
                    crafted & pretty. This leads us to the next consideration, which
                    is:
                  </li>

                  <li>
                    <b>Theming</b> - all components need to have an easy to understand
                    theming mechanism. We're well aware of the shift to css-in-js, css
                    modules and inline-styling, but for the purpose of reusable
                    components and simplicity everyone can understand, we've decided
                    to stick with the <b>BEM</b> methodology. In this way, when you
                    choose <b>Zippytech React Toolkit</b> you're free to keep your
                    existing styling solution in your app.
                  </li>

                  <li>
                    <b>Functionality</b> - the most common usage patterns for a
                    component should be already built-in. For example, you should be
                    able to easily configure a menu for single selection or a Window
                    to resize proportionally.
                  </li>

                  <li>
                    <b>Flexibility & extensibility</b> - all components need to be
                    very flexible in adapting to a wide spectrum of needs. Changing
                    some styles, replacing some rendering logic or adding a custom
                    validation should all be possible and easily achievable.
                  </li>

                  <li>
                    <b>Consistency</b> - designing components that work well with each
                    other is crucial. You'll probably find many excellent but singular
                    UI components - but a consistent & coherent toolkit does make a
                    different in how fast you can develop your app.
                  </li>

                  <li>
                    <b>RTL</b> - right-to-left support is very spotty in open-source
                    UI components. We're trying to fix that.
                  </li>
                </ul>
              </Side>

              <Side
                style={{
                  padding: 10,
                  background: '#556a8e',
                  color: 'white'
                }}
              >
                <div>
                  Copyright{' '}
                  <svg fill="#fff" height="18" viewBox="0 0 24 24" width="18" style={{ marginBottom: '-4px' }}>
                    <defs>
                        <path d="M24 0v24H0V0h24z" id="a"/>
                    </defs>
                    <clipPath id="b">
                        <use overflow="visible"/>
                    </clipPath>
                    <path d="M10.08 10.86c.05-.33.16-.62.3-.87s.34-.46.59-.62c.24-.15.54-.22.91-.23.23.01.44.05.63.13.2.09.38.21.52.36s.25.33.34.53.13.42.14.64h1.79c-.02-.47-.11-.9-.28-1.29s-.4-.73-.7-1.01-.66-.5-1.08-.66-.88-.23-1.39-.23c-.65 0-1.22.11-1.7.34s-.88.53-1.2.92-.56.84-.71 1.36S8 11.29 8 11.87v.27c0 .58.08 1.12.23 1.64s.39.97.71 1.35.72.69 1.2.91 1.05.34 1.7.34c.47 0 .91-.08 1.32-.23s.77-.36 1.08-.63.56-.58.74-.94.29-.74.3-1.15h-1.79c-.01.21-.06.4-.15.58s-.21.33-.36.46-.32.23-.52.3c-.19.07-.39.09-.6.1-.36-.01-.66-.08-.89-.23-.25-.16-.45-.37-.59-.62s-.25-.55-.3-.88-.08-.67-.08-1v-.27c0-.35.03-.68.08-1.01zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
                  </svg>{' '}
                  2017 - Zippytech React Toolkit
                </div>
              </Side>
            </SplitContainer>
          </Side>
          <Side
            style={{ padding: 10, background: '#ca7768', color: 'white' }}
          >
            <div style={{ display: 'inline-block' }}>
              <h3>Overview</h3>
              <p>
                Zippytech React Toolkit is designed to be a comprehensive set of rich UI
                components built with React and that can be easily integrated into
                existing or new applications.
              </p>
              <p>
                We've gone through a lot of iterations to make sure we provide a rich
                and flexible component set that is actually useful and help you
                speed-up app development.
              </p>
              <p>
                We focus on building components, so you can focus on what actually
                matters to you - building & shipping your app faster to the market.
              </p>
            </div>
          </Side>
        </SplitContainer>
      </SplitContainer>
    </div>
  }
}

export default () => <App />
Bool|[Bool,Bool]
default: true
Configures whether the content inside the <SplitContainer /> sides should be stretched to fill the <Side />
When fillSides=true it's important that you only have one child for each <Side />, so it can be stretched to fill the available space.
import React from 'react'
import SplitContainer, { Side } from '@zippytech/react-toolkit/SplitContainer'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/SplitContainer/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      leftSide: false,
      rightSide: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.leftSide}
          onChange={(leftSide) => this.setState({ leftSide })}
        >
          Fill left side
        </CheckBox>
      </div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.rightSide}
          onChange={(rightSide) => this.setState({ rightSide })}
        >
          Fill right side
        </CheckBox>
      </div>
      <SplitContainer bordered style={{ minHeight: 400 }}
        orientation="vertical"
        minSize="10%"
        defaultSplitAt="50%"
        fillSides={[this.state.leftSide, this.state.rightSide]}
      >
        <Side>
          <div style={{background: '#d1dae0', color: '#1F2D3D', padding: 20 }}>
            <input placeholder="Email address" />
          </div>
        </Side>

        <SplitContainer.Side>
          <div style={{ display: 'inline-block', color: 'white', background: '#1F2D3D', padding: 20 }}>
            <h3>Components:</h3>
            <ul>
              <li>Accordion</li>
              <li>Button</li>
              <li>CheckBox</li>
              <li>ColorPicker</li>
              <li>ComboBox</li>
              <li>LoadMask</li>
            </ul>
          </div>
        </SplitContainer.Side>
      </SplitContainer>
    </div>
  }
}

export default () => <App />
Bool
default: false
If true, will prevent the <SplitContainer /> from being resized and collapsed/expand. Any interaction with the splitbar is disabled.
import React from 'react'
import SplitContainer from '@zippytech/react-toolkit/SplitContainer'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/SplitContainer/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      locked: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.locked}
          onChange={(locked) => this.setState({ locked })}
        >
          Locked
        </CheckBox>
      </div>
      <SplitContainer
        locked={this.state.locked}
        defaultSplitAt="50%"
        bordered
        orientation="vertical"
        style={{ height: 500 }}
      >
        <SplitContainer.Side style={{ padding: 10, background: '#d1dae0', color: '#1F2D3D' }} >
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI
            components built with React and that can be easily integrated into
            existing or new applications.
          </p>
          <p>
            We've gone through a lot of iterations to make sure we provide a rich
            and flexible component set that is actually useful and help you
            speed-up app development.
          </p>
          <p>
            We focus on building components, so you can focus on what actually
            matters to you - building & shipping your app faster to the market.
          </p>
          <p>
            You can navigate this documentation either by using the side menu on
            the left, or the next/prev links below, or you can press the{' '}
            <code>n</code> key (from next) or the <code>p</code> key (from prev)
            to navigate to the next/prev page in the docs.
          </p>
        </SplitContainer.Side>

        <SplitContainer.Side style={{ padding: 10, background: '#556a8e', color: 'white' }} >
          <p>
            When we started building the toolkit, we've made a checklist of
            features that our components need to include out-of-the-box:
          </p>
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job
              quickly. This will generally not be a problem with smaller
              components like buttons, dialogs, color pickers, etc - but menus,
              lists and grids need a lot of performance considerations in order
              to be really snappy.
            </li>

            <li>
              <b>Flexibility & extensibility</b> - all components need to be
              very flexible in adapting to a wide spectrum of needs. Changing
              some styles, replacing some rendering logic or adding a custom
              validation should all be possible and easily achievable.
            </li>
          </ul>
        </SplitContainer.Side>
      </SplitContainer>
    </div>
  }
}

export default () => <App />
Number|String|Array[Number]|Array[String]
default: undefined
Configures the maximum size for the sides of the <SplitContainer />.
Possible values are:
  • number >= 0 - when specified as a number, this value will be used for both sides of the <SplitContainer />. The sides will not be larger than the specified number.
  • percentage string - when specified as a percentage string, this value will be used for both sides of the <SplitContainer />. The sides will not be larger than the specified percentage.
  • array of any of the above (one of the values can be undefined) - specifies the maximum size for each of the sides of the container separately.
import React from 'react'
import SplitContainer from '@zippytech/react-toolkit/SplitContainer'
import { Side } from '@zippytech/react-toolkit/SplitContainer'
import '@zippytech/react-toolkit/SplitContainer/index.css'

export default () => {
  return <div>
    <SplitContainer
      maxSize={['60%', 600]}
      defaultSplitAt={'-auto'}
      bordered
      orientation="vertical"
      style={{ height: 500 }}
    >
      <Side style={{ padding: 10, background: '#d1dae0', color: '#1F2D3D' }}>
        <p>
          Zippytech React Toolkit is designed to be a comprehensive set of rich UI
          components built with React and that can be easily integrated into
          existing or new applications.
        </p>
        <p>
          We've gone through a lot of iterations to make sure we provide a rich
          and flexible component set that is actually useful and help you
          speed-up app development.
        </p>
        <p>
          We focus on building components, so you can focus on what actually
          matters to you - building & shipping your app faster to the market.
        </p>
        <p>
          You can navigate this documentation either by using the side menu on
          the left, or the next/prev links below, or you can press the{' '}
          <code>n</code> key (from next) or the <code>p</code> key (from prev)
          to navigate to the next/prev page in the docs.
        </p>
      </Side>

      <Side style={{ padding: 10, background: '#556a8e', color: 'white' }}>
        <div style={{ display: 'inline-block' }}>
          <p>
            When we started building the toolkit, we've made a checklist of
            features that our components need to include out-of-the-box:
          </p>
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job
              quickly. This will generally not be a problem with smaller
              components like buttons, dialogs, color pickers, etc - but menus,
              lists and grids need a lot of performance considerations in order
              to be really snappy.
            </li>

            <li>
              <b>Flexibility & extensibility</b> - all components need to be
              very flexible in adapting to a wide spectrum of needs. Changing
              some styles, replacing some rendering logic or adding a custom
              validation should all be possible and easily achievable.
            </li>
          </ul>
        </div>
      </Side>
    </SplitContainer>
  </div>
}
Number|String|Array[Number]|Array[String]
default: undefined
Configures the minimum size for the sides of the <SplitContainer />.
Possible values are:
  • number >= 0 - when specified as a number, this value will be used for both sides of the <SplitContainer />. The sides will not be smaller than the specified number.
  • percentage string - when specified as a percentage string, this value will be used for both sides of the <SplitContainer />. The sides will not be smaller than the specified percentage.
  • array of any of the above (one of the values can be undefined) - specifies the minimum size for each of the sides of the container separately.
import React from 'react'
import SplitContainer from '@zippytech/react-toolkit/SplitContainer'
import { Side }from '@zippytech/react-toolkit/SplitContainer'
import '@zippytech/react-toolkit/SplitContainer/index.css'

export default () => {
  return <div>
    <SplitContainer
      minSize={[350, 250]}
      defaultSplitAt="60%"
      bordered
      orientation="vertical"
      style={{ height: 500 }}
    >
      <Side style={{ padding: 10, background: '#d1dae0', color: '#1F2D3D' }}>
        <p>
          Zippytech React Toolkit is designed to be a comprehensive set of rich UI
          components built with React and that can be easily integrated into
          existing or new applications.
        </p>
        <p>
          We've gone through a lot of iterations to make sure we provide a rich
          and flexible component set that is actually useful and help you
          speed-up app development.
        </p>
        <p>
          We focus on building components, so you can focus on what actually
          matters to you - building & shipping your app faster to the market.
        </p>
        <p>
          You can navigate this documentation either by using the side menu on
          the left, or the next/prev links below, or you can press the{' '}
          <code>n</code> key (from next) or the <code>p</code> key (from prev)
          to navigate to the next/prev page in the docs.
        </p>
      </Side>

      <Side style={{ padding: 10, background: '#556a8e', color: 'white' }}>
        <p>
          When we started building the toolkit, we've made a checklist of
          features that our components need to include out-of-the-box:
        </p>
        <ul>
          <li>
            <b>Performance</b> - a component is only useful if it does its job
            quickly. This will generally not be a problem with smaller
            components like buttons, dialogs, color pickers, etc - but menus,
            lists and grids need a lot of performance considerations in order
            to be really snappy.
          </li>

          <li>
            <b>Flexibility & extensibility</b> - all components need to be
            very flexible in adapting to a wide spectrum of needs. Changing
            some styles, replacing some rendering logic or adding a custom
            validation should all be possible and easily achievable.
          </li>
        </ul>
      </Side>
    </SplitContainer>
  </div>
}
Number
default: 40
In mobile browsers, the splitbar, besides being configured with splitterSize also has a transparent layer on top, which makes the drag area larger, so users can more easily grab the splitbar and resize the <SplitContainer />.
import React from 'react'
import SplitContainer, { Splitter } from '@zippytech/react-toolkit/SplitContainer'
import '@zippytech/react-toolkit/SplitContainer/index.css'

export default () => {
  return <div>
    <SplitContainer
      splitterSize={10}
      mobileSplitterDragArea={50}
      defaultSplitAt="50%"
      bordered
      orientation="vertical"
      minSize={50}
      style={{ height: 500 }}
    >
      <SplitContainer.Side style={{ padding: 10, background: '#d1dae0', color: '#1F2D3D' }} >
        <p>
          Zippytech React Toolkit is designed to be a comprehensive set of rich UI
          components built with React and that can be easily integrated into
          existing or new applications.
        </p>
        <p>
          We've gone through a lot of iterations to make sure we provide a rich
          and flexible component set that is actually useful and help you
          speed-up app development.
        </p>
        <p>
          We focus on building components, so you can focus on what actually
          matters to you - building & shipping your app faster to the market.
        </p>
        <p>
          You can navigate this documentation either by using the side menu on
          the left, or the next/prev links below, or you can press the{' '}
          <code>n</code> key (from next) or the <code>p</code> key (from prev)
          to navigate to the next/prev page in the docs.
        </p>
      </SplitContainer.Side>

      <SplitContainer.Side style={{ padding: 10, background: '#556a8e', color: 'white' }} >
        <p>
          When we started building the toolkit, we've made a checklist of
          features that our components need to include out-of-the-box:
        </p>
        <ul>
          <li>
            <b>Performance</b> - a component is only useful if it does its job
            quickly. This will generally not be a problem with smaller
            components like buttons, dialogs, color pickers, etc - but menus,
            lists and grids need a lot of performance considerations in order
            to be really snappy.
          </li>

          <li>
            <b>Flexibility & extensibility</b> - all components need to be
            very flexible in adapting to a wide spectrum of needs. Changing
            some styles, replacing some rendering logic or adding a custom
            validation should all be possible and easily achievable.
          </li>
        </ul>
      </SplitContainer.Side>
    </SplitContainer>
  </div>
}
String
default: "horizontal"
Specifies the orientation of the <SplitContainer /> - namely the orientation of the split-bar that separates the two sides.
Possible values are:
  • "horizontal" - the split-bar is oriented horizontally, and the two sides of the container are placed to the top and bottom respectively.
  • "vertical" - the split-bar is oriented vertically, and the two sides of the container are placed to the left and right respectively.
import React from 'react'
import SplitContainer, { Side } from '@zippytech/react-toolkit/SplitContainer'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/SplitContainer/index.css'
import '@zippytech/react-toolkit/ComboBox/index.css'

const dataSource = [
  { label: 'horizontal', id: 'horizontal' },
  { label: 'vertical', id: 'vertical' }
]

export default () => {
  class App extends React.Component {
    constructor(props) {
      super(props)

      this.state = {
        orientation: 'vertical'
      }
    }

    render() {
      return <div>
        <div style={{ marginBottom: 20 }}>
          Orientation:{' '}
          <ComboBox
            collapseOnSelect
            changeValueOnNavigation
            inlineFlex
            style={{ width: 200 }}
            dataSource={dataSource}
            idProperty="id"
            value={this.state.orientation}
            onChange={(value) => this.setState({ orientation: value })}
          />
        </div>
        <SplitContainer
          defaultSplitAt="50%"
          orientation={this.state.orientation}
          style={{height: 500 }}
        >
          <Side style={{ padding: 10, background: '#d1dae0', color: '#1F2D3D' }} >
            <div>
              <p>
                Zippytech React Toolkit is designed to be a comprehensive set of rich UI
                components built with React and that can be easily integrated into
                existing or new applications.
              </p>
              <p>
                We've gone through a lot of iterations to make sure we provide a rich
                and flexible component set that is actually useful and help you
                speed-up app development.
              </p>
              <p>
                We focus on building components, so you can focus on what actually
                matters to you - building & shipping your app faster to the market.
              </p>
              <p>
                You can navigate this documentation either by using the side menu on
                the left, or the next/prev links below, or you can press the{' '}
                <code>n</code> key (from next) or the <code>p</code> key (from prev)
                to navigate to the next/prev page in the docs.
              </p>
            </div>
          </Side>

          <Side style={{ padding: 10, background: '#556a8e', color: 'white' }} >
            <div>
              <p>
                When we started building the toolkit, we've made a checklist of
                features that our components need to include out-of-the-box:
              </p>
              <ul>
                <li>
                  <b>Performance</b> - a component is only useful if it does its job
                  quickly. This will generally not be a problem with smaller
                  components like buttons, dialogs, color pickers, etc - but menus,
                  lists and grids need a lot of performance considerations in order
                  to be really snappy.
                </li>

                <li>
                  <b>Flexibility & extensibility</b> - all components need to be
                  very flexible in adapting to a wide spectrum of needs. Changing
                  some styles, replacing some rendering logic or adding a custom
                  validation should all be possible and easily achievable.
                </li>
              </ul>
            </div>
          </Side>
        </SplitContainer>
      </div>
    }
  }

  return <App />
}
Number
default: undefined
Configures the zIndex of the SplitContainer.Splitter resize proxy
import React from 'react'
import SplitContainer from '@zippytech/react-toolkit/SplitContainer'
import NumericInput from '@zippytech/react-toolkit/NumericInput'
import '@zippytech/react-toolkit/SplitContainer/index.css'
import '@zippytech/react-toolkit/NumericInput/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      zIndex: 0
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Change z-index of the splitter:{' '}
        <NumericInput
          style={{ width: 70 }}
          minValue={-10}
          maxValue={10}
          value={this.state.zIndex}
          onChange={(zIndex) => this.setState({ zIndex })}
        />
      </div>
      <SplitContainer bordered style={{ minHeight: 400 }}
        orientation="vertical"
        minSize="10%"
        defaultSplitAt="50%"
        proxyZIndex={this.state.zIndex}
      >
        <SplitContainer.Side style={{ padding: 10, background: '#d1dae0', color: '#1F2D3D' }} >
          <div>
            <p>
              Zippytech React Toolkit is designed to be a comprehensive set of rich UI
              components built with React and that can be easily integrated into
              existing or new applications.
            </p>
            <p>
              We've gone through a lot of iterations to make sure we provide a rich
              and flexible component set that is actually useful and help you
              speed-up app development.
            </p>
            <p>
              We focus on building components, so you can focus on what actually
              matters to you - building & shipping your app faster to the market.
            </p>
            <p>
              You can navigate this documentation either by using the side menu on
              the left, or the next/prev links below, or you can press the{' '}
              <code>n</code> key (from next) or the <code>p</code> key (from prev)
              to navigate to the next/prev page in the docs.
            </p>
          </div>
        </SplitContainer.Side>

        <SplitContainer.Side style={{ padding: 10, background: '#556a8e', color: 'white' }} >
          <div>
            <p>
              When we started building the toolkit, we've made a checklist of
              features that our components need to include out-of-the-box:
            </p>
            <ul>
              <li>
                <b>Performance</b> - a component is only useful if it does its job
                quickly. This will generally not be a problem with smaller
                components like buttons, dialogs, color pickers, etc - but menus,
                lists and grids need a lot of performance considerations in order
                to be really snappy.
              </li>

              <li>
                <b>Flexibility & extensibility</b> - all components need to be
                very flexible in adapting to a wide spectrum of needs. Changing
                some styles, replacing some rendering logic or adding a custom
                validation should all be possible and easily achievable.
              </li>
            </ul>
          </div>
        </SplitContainer.Side>
      </SplitContainer>
    </div>
  }
}

export default () => <App />
Bool
default: true
By default, a resize proxy is displayed while dragging the splitbar.
You can specify false for the resize proxy, and have the resize happen live in the DOM and adjust the size of the <SplitContainer /> sides while dragging.
import React from 'react'
import SplitContainer, { Splitter, Side } from '@zippytech/react-toolkit/SplitContainer'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/SplitContainer/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      resizeProxy: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.resizeProxy}
          onChange={(resizeProxy) => this.setState({ resizeProxy })}
        >
          Resize proxy
        </CheckBox>
      </div>
      <SplitContainer
        resizeProxy={this.state.resizeProxy}
        orientation="vertical"
        defaultSplitAt="50%"
        minSize={50}
        style={{ height: 500 }}
      >
        <Side style={{ padding: 10, background: '#d1dae0', color: '#1F2D3D' }} >
          <div>
            <p>
              Zippytech React Toolkit is designed to be a comprehensive set of rich UI
              components built with React and that can be easily integrated into
              existing or new applications.
            </p>
            <p>
              We've gone through a lot of iterations to make sure we provide a rich
              and flexible component set that is actually useful and help you
              speed-up app development.
            </p>
            <p>
              We focus on building components, so you can focus on what actually
              matters to you - building & shipping your app faster to the market.
            </p>
            <p>
              You can navigate this documentation either by using the side menu on
              the left, or the next/prev links below, or you can press the{' '}
              <code>n</code> key (from next) or the <code>p</code> key (from prev)
              to navigate to the next/prev page in the docs.
            </p>
          </div>
        </Side>

        <Side style={{ padding: 10, background: '#556a8e', color: 'white' }} >
          <div>
            <p>
              When we started building the toolkit, we've made a checklist of
              features that our components need to include out-of-the-box:
            </p>
            <ul>
              <li>
                <b>Performance</b> - a component is only useful if it does its job
                quickly. This will generally not be a problem with smaller
                components like buttons, dialogs, color pickers, etc - but menus,
                lists and grids need a lot of performance considerations in order
                to be really snappy.
              </li>

              <li>
                <b>Flexibility & extensibility</b> - all components need to be
                very flexible in adapting to a wide spectrum of needs. Changing
                some styles, replacing some rendering logic or adding a custom
                validation should all be possible and easily achievable.
              </li>
            </ul>
          </div>
        </Side>
      </SplitContainer>
    </div>
  }
}

export default () => <App />
Number
default: 20
The amount by which the <SplitContainer /> is resized via keyboard events. See enableKeyboardNavigation.
import React from 'react'
import SplitContainer, { Side } from '@zippytech/react-toolkit/SplitContainer'
import '@zippytech/react-toolkit/SplitContainer/index.css'

export default () => {
  return <div>
    <SplitContainer
      shiftResizeStep={90}
      defaultSplitAt="60%"
      bordered
      orientation="vertical"
      minSize={50}
      style={{ height: 500 }}
    >
      <Side style={{ padding: 10, background: '#d1dae0', color: '#1F2D3D' }} >
        <div>
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI
            components built with React and that can be easily integrated into
            existing or new applications.
          </p>
          <p>
            We've gone through a lot of iterations to make sure we provide a rich
            and flexible component set that is actually useful and help you
            speed-up app development.
          </p>
          <p>
            We focus on building components, so you can focus on what actually
            matters to you - building & shipping your app faster to the market.
          </p>
          <p>
            You can navigate this documentation either by using the side menu on
            the left, or the next/prev links below, or you can press the{' '}
            <code>n</code> key (from next) or the <code>p</code> key (from prev)
            to navigate to the next/prev page in the docs.
          </p>
        </div>
      </Side>

      <Side style={{ padding: 10, background: '#556a8e', color: 'white' }} >
        <div>
          <p>
            When we started building the toolkit, we've made a checklist of
            features that our components need to include out-of-the-box:
          </p>
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job
              quickly. This will generally not be a problem with smaller
              components like buttons, dialogs, color pickers, etc - but menus,
              lists and grids need a lot of performance considerations in order
              to be really snappy.
            </li>

            <li>
              <b>Flexibility & extensibility</b> - all components need to be
              very flexible in adapting to a wide spectrum of needs. Changing
              some styles, replacing some rendering logic or adding a custom
              validation should all be possible and easily achievable.
            </li>
          </ul>
        </div>
      </Side>
    </SplitContainer>
  </div>
}
Number|String
default: undefined
Specifies the position of the split-bar - the point where to split the container.
This is a controlled prop. As a result, if you don't change its value when onResize happens, the split position will not be updated.
For uncontrolled behaviour, use defaultSplitAt.
Possible values are:
  • numbers - positive or negative.
    When a positive number is used, the splitbar will be positioned at the specified offset starting from the first side border.
    When a negative number is used, the splitbar will be positioned at the specified offset starting from the second side border.
  • percentages - positive or negative
    When a positive percentage (eg: "30%") is specified, the splitbar will be positioned at the specified offset from the first side border.
    When a negative percentage (eg: "-30%") is specified, the splitbar will be positioned at the specified offset starting from the second side border.
  • "auto" or "-auto"
    When "auto" is specified, the first side of the <SplitContainer /> will adjust the auto size of the first side of the container. The second side will fill all the remaining available space.
    When "-auto" is specified, the second side of the <SplitContainer /> will adjust the auto size of the second side of the container. The first side will fill all the remaining available space.
As a general rule, when splitAt is negative (or starts with a -), the second side of the container is used as a reference - so -300 means the second side will be 300px in size, while the first side will fill all the remaining available space.
import React from 'react'
import SplitContainer from '@zippytech/react-toolkit/SplitContainer'
import '@zippytech/react-toolkit/SplitContainer/index.css'

class App extends React.Component {
  constructor(props) {
    super(props); this.state = { splitAt: '30%' }
  }
  render() {
    return <div style={{ height: 500 }}>
      <div style={{ marginBottom: 20 }}>Current splitAt: {this.state.splitAt}.</div>
      <p>
        You can resize this example window to see the split point being respected.
      </p>
      <SplitContainer
        splitAt={this.state.splitAt}
        bordered
        onResize={(splitAt) => { this.setState({ splitAt }) }}
        orientation="vertical" style={{ height: 500}}
      >
        <SplitContainer.Side style={{ padding: 10, background: '#d1dae0', color: '#1F2D3D' }} >
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI
            components built with React and that can be easily integrated into
            existing or new applications.
          </p>
          <p>
            We've gone through a lot of iterations to make sure we provide a rich
            and flexible component set that is actually useful and help you
            speed-up app development.
          </p>
          <p>
            We focus on building components, so you can focus on what actually
            matters to you - building & shipping your app faster to the market.
          </p>
          <p>
            You can navigate this documentation either by using the side menu on
            the left, or the next/prev links below, or you can press the{' '}
            <code>n</code> key (from next) or the <code>p</code> key (from prev)
            to navigate to the next/prev page in the docs.
          </p>
        </SplitContainer.Side>

        <SplitContainer.Side style={{ padding: 10, background: '#556a8e', color: 'white' }} >
          <p>
            When we started building the toolkit, we've made a checklist of
            features that our components need to include out-of-the-box:
          </p>
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job
              quickly. This will generally not be a problem with smaller
              components like buttons, dialogs, color pickers, etc - but menus,
              lists and grids need a lot of performance considerations in order
              to be really snappy.
            </li>

            <li>
              <b>Flexibility & extensibility</b> - all components need to be
              very flexible in adapting to a wide spectrum of needs. Changing
              some styles, replacing some rendering logic or adding a custom
              validation should all be possible and easily achievable.
            </li>
          </ul>
        </SplitContainer.Side>
      </SplitContainer>
    </div>
  }
}
export default () => {
  return <App />
}
With the snippet above, if the <SplitContainer /> were to be flexible in height, the second side of the container would always remain 100px in height, while the first side will always fill the remaining available space.
Number
default: 12
The size of the splitbar. For a horizontal <SplitContainer />, this will be the height of the splitbar. For vertical <SplitContainer />, this will be the width of the splitbar.
import React from 'react'
import SplitContainer, { Splitter } from '@zippytech/react-toolkit/SplitContainer'
import '@zippytech/react-toolkit/SplitContainer/index.css'

export default () => {
  return <div>
    <SplitContainer
      splitterSize={30}
      defaultSplitAt="60%"
      bordered
      orientation="vertical"
      minSize={50}
      style={{ height: 500 }}
    >
      <SplitContainer.Side style={{ padding: 10, background: '#d1dae0', color: '#1F2D3D' }} >
        <div>
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI
            components built with React and that can be easily integrated into
            existing or new applications.
          </p>
          <p>
            We've gone through a lot of iterations to make sure we provide a rich
            and flexible component set that is actually useful and help you
            speed-up app development.
          </p>
          <p>
            We focus on building components, so you can focus on what actually
            matters to you - building & shipping your app faster to the market.
          </p>
          <p>
            You can navigate this documentation either by using the side menu on
            the left, or the next/prev links below, or you can press the{' '}
            <code>n</code> key (from next) or the <code>p</code> key (from prev)
            to navigate to the next/prev page in the docs.
          </p>
        </div>
      </SplitContainer.Side>

      <SplitContainer.Side style={{ padding: 10, background: '#556a8e', color: 'white' }} >
        <div>
          <p>
            When we started building the toolkit, we've made a checklist of
            features that our components need to include out-of-the-box:
          </p>
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job
              quickly. This will generally not be a problem with smaller
              components like buttons, dialogs, color pickers, etc - but menus,
              lists and grids need a lot of performance considerations in order
              to be really snappy.
            </li>

            <li>
              <b>Flexibility & extensibility</b> - all components need to be
              very flexible in adapting to a wide spectrum of needs. Changing
              some styles, replacing some rendering logic or adding a custom
              validation should all be possible and easily achievable.
            </li>
          </ul>
        </div>
      </SplitContainer.Side>
    </SplitContainer>
  </div>
}
Bool
default: true
Determines if collapse/expand actions happen with transition or not. The duration of the transition is controlled by transitionDuration.
import React from 'react'
import SplitContainer from '@zippytech/react-toolkit/SplitContainer'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/SplitContainer/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      transition: true
    }
  }

  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        <CheckBox
          checked={this.state.transition}
          onChange={(transition) => {
            this.setState({
              transition
            })
          }}
        >
          Transition - collapse a SplitContainer side to see it in action
        </CheckBox>
      </div>
      <SplitContainer
        transition={this.state.transition}
        defaultSplitAt="50%"
        bordered
        orientation="vertical"
        style={{ height: 500 }}
      >
        <SplitContainer.Side style={{ padding: 10, background: '#d1dae0', color: '#1F2D3D' }} >
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI
            components built with React and that can be easily integrated into
            existing or new applications.
          </p>
          <p>
            We've gone through a lot of iterations to make sure we provide a rich
            and flexible component set that is actually useful and help you
            speed-up app development.
          </p>
          <p>
            We focus on building components, so you can focus on what actually
            matters to you - building & shipping your app faster to the market.
          </p>
          <p>
            You can navigate this documentation either by using the side menu on
            the left, or the next/prev links below, or you can press the{' '}
            <code>n</code> key (from next) or the <code>p</code> key (from prev)
            to navigate to the next/prev page in the docs.
          </p>
        </SplitContainer.Side>

        <SplitContainer.Side style={{ padding: 10, background: '#556a8e', color: 'white' }} >
          <p>
            When we started building the toolkit, we've made a checklist of
            features that our components need to include out-of-the-box:
          </p>
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job
              quickly. This will generally not be a problem with smaller
              components like buttons, dialogs, color pickers, etc - but menus,
              lists and grids need a lot of performance considerations in order
              to be really snappy.
            </li>

            <li>
              <b>Flexibility & extensibility</b> - all components need to be
              very flexible in adapting to a wide spectrum of needs. Changing
              some styles, replacing some rendering logic or adding a custom
              validation should all be possible and easily achievable.
            </li>
          </ul>
        </SplitContainer.Side>
      </SplitContainer>
    </div>
  }
}

export default () => <App />
String
default: "0.4s"
Determines the duration of the collapse/expand transition.
import React from 'react'
import SplitContainer from '@zippytech/react-toolkit/SplitContainer'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/SplitContainer/index.css'
import '@zippytech/react-toolkit/ComboBox/index.css'

const dataSource = [
  { label: '0.4s', id: '0.4s' },
  { label: '1.0s', id: '1.0s' },
  { label: '1.5s', id: '1.5s' },
  { label: '2.5s', id: '2.5s' },
]

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      transitionDuration: '0.4s'
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Transition duration:{' '}
        <ComboBox
          inlineFlex
          collapseOnSelect
          style={{ width: 200 }}
          dataSource={dataSource}
          value={this.state.transitionDuration}
          onChange={(value) => this.setState({ transitionDuration: value })}
        />
      </div>
      <SplitContainer
        transitionDuration={this.state.transitionDuration}
        defaultSplitAt="50%"
        bordered
        orientation="vertical"
        style={{ height: 500 }}
      >
        <SplitContainer.Side style={{ padding: 10, background: '#d1dae0', color: '#1F2D3D' }} >
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI
            components built with React and that can be easily integrated into
            existing or new applications.
          </p>
          <p>
            We've gone through a lot of iterations to make sure we provide a rich
            and flexible component set that is actually useful and help you
            speed-up app development.
          </p>
          <p>
            We focus on building components, so you can focus on what actually
            matters to you - building & shipping your app faster to the market.
          </p>
          <p>
            You can navigate this documentation either by using the side menu on
            the left, or the next/prev links below, or you can press the{' '}
            <code>n</code> key (from next) or the <code>p</code> key (from prev)
            to navigate to the next/prev page in the docs.
          </p>
        </SplitContainer.Side>

        <SplitContainer.Side style={{ padding: 10, background: '#556a8e', color: 'white' }} >
          <p>
            When we started building the toolkit, we've made a checklist of
            features that our components need to include out-of-the-box:
          </p>
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job
              quickly. This will generally not be a problem with smaller
              components like buttons, dialogs, color pickers, etc - but menus,
              lists and grids need a lot of performance considerations in order
              to be really snappy.
            </li>

            <li>
              <b>Flexibility & extensibility</b> - all components need to be
              very flexible in adapting to a wide spectrum of needs. Changing
              some styles, replacing some rendering logic or adding a custom
              validation should all be possible and easily achievable.
            </li>
          </ul>
        </SplitContainer.Side>
      </SplitContainer>
    </div>
  }
}

export default () => <App />
Fn(index: Number)
default: undefined
Called when one of the sides of the <SplitContainer /> are collapsed.
When using the controlled collapsedIndex prop, make sure you update the value of collapsedIndex using onCollapse and onExpand callback props accordingly.
import React from 'react'
import SplitContainer from '@zippytech/react-toolkit/SplitContainer'
import '@zippytech/react-toolkit/SplitContainer/index.css'

import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      collapsedIndex: null
    }
  }

  render() {
    return <div>
      <p>
        Currently collapsed index: <code>{JSON.stringify(this.state.collapsedIndex)}</code>
      </p>
      <SplitContainer
        style={{ height: 560}}
        collapsedIndex={this.state.collapsedIndex}
        onExpand={() => {
          zippy.notification.first.addNotification({
            content: 'onExpand called'
          });
          this.setState({
            collapsedIndex: null
          })
        }}
        onCollapse={(index) => {
          zippy.notification.first.addNotification({
            content: 'onCollapse called'
          });
          this.setState({
            collapsedIndex: index
          })
        }}

        defaultSplitAt="50%"
        orientation="vertical"
        minSize={50}
        style={{ height: 500 }}
      >
        <SplitContainer.Side style={{ padding: 10, background: '#d1dae0', color: '#1F2D3D' }}>
          <div>
            <p>
              Zippytech React Toolkit is designed to be a comprehensive set of rich UI
              components built with React and that can be easily integrated into
              existing or new applications.
            </p>
            <p>
              We've gone through a lot of iterations to make sure we provide a rich
              and flexible component set that is actually useful and help you
              speed-up app development.
            </p>
            <p>
              We focus on building components, so you can focus on what actually
              matters to you - building & shipping your app faster to the market.
            </p>
            <p>
              You can navigate this documentation either by using the side menu on
              the left, or the next/prev links below, or you can press the{' '}
              <code>n</code> key (from next) or the <code>p</code> key (from prev)
              to navigate to the next/prev page in the docs.
            </p>
          </div>
        </SplitContainer.Side>
        <SplitContainer.Side style={{ padding: 10, background: '#556a8e', color: 'white' }}>
          <div>
            <p>
              When we started building the toolkit, we've made a checklist of
              features that our components need to include out-of-the-box:
            </p>
            <ul>
              <li>
                <b>Performance</b> - a component is only useful if it does its job
                quickly. This will generally not be a problem with smaller
                components like buttons, dialogs, color pickers, etc - but menus,
                lists and grids need a lot of performance considerations in order
                to be really snappy.
              </li>

              <li>
                <b>Flexibility & extensibility</b> - all components need to be
                very flexible in adapting to a wide spectrum of needs. Changing
                some styles, replacing some rendering logic or adding a custom
                validation should all be possible and easily achievable.
              </li>
            </ul>
          </div>
        </SplitContainer.Side>
      </SplitContainer>
      <NotificationBoard id="first" />
    </div>
  }
}
export default () => <App />
Fn(index: Number)
default: undefined
Called when one of the sides of the <SplitContainer /> are expanded.
When using the controlled collapsedIndex prop, make sure you update the value of collapsedIndex using onCollapse and onExpand callback props accordingly.
import React from 'react'
import SplitContainer from '@zippytech/react-toolkit/SplitContainer'
import '@zippytech/react-toolkit/SplitContainer/index.css'

import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      collapsedIndex: null
    }
  }

  render() {
    return <div>
      <p>
        Currently collapsed index: <code>{JSON.stringify(this.state.collapsedIndex)}</code>
      </p>
      <SplitContainer
        style={{ height: 560}}
        collapsedIndex={this.state.collapsedIndex}
        onExpand={() => {
          zippy.notification.first.addNotification({
            content: 'onExpand called'
          });
          this.setState({
            collapsedIndex: null
          })
        }}
        onCollapse={(index) => {
          zippy.notification.first.addNotification({
            content: 'onCollapse called'
          });
          this.setState({
            collapsedIndex: index
          })
        }}

        defaultSplitAt="50%"
        orientation="vertical"
        minSize={50}
        style={{ height: 500 }}
      >
        <SplitContainer.Side style={{ padding: 10, background: '#d1dae0', color: '#1F2D3D' }}>
          <div>
            <p>
              Zippytech React Toolkit is designed to be a comprehensive set of rich UI
              components built with React and that can be easily integrated into
              existing or new applications.
            </p>
            <p>
              We've gone through a lot of iterations to make sure we provide a rich
              and flexible component set that is actually useful and help you
              speed-up app development.
            </p>
            <p>
              We focus on building components, so you can focus on what actually
              matters to you - building & shipping your app faster to the market.
            </p>
            <p>
              You can navigate this documentation either by using the side menu on
              the left, or the next/prev links below, or you can press the{' '}
              <code>n</code> key (from next) or the <code>p</code> key (from prev)
              to navigate to the next/prev page in the docs.
            </p>
          </div>
        </SplitContainer.Side>
        <SplitContainer.Side style={{ padding: 10, background: '#556a8e', color: 'white' }}>
          <div>
            <p>
              When we started building the toolkit, we've made a checklist of
              features that our components need to include out-of-the-box:
            </p>
            <ul>
              <li>
                <b>Performance</b> - a component is only useful if it does its job
                quickly. This will generally not be a problem with smaller
                components like buttons, dialogs, color pickers, etc - but menus,
                lists and grids need a lot of performance considerations in order
                to be really snappy.
              </li>

              <li>
                <b>Flexibility & extensibility</b> - all components need to be
                very flexible in adapting to a wide spectrum of needs. Changing
                some styles, replacing some rendering logic or adding a custom
                validation should all be possible and easily achievable.
              </li>
            </ul>
          </div>
        </SplitContainer.Side>
      </SplitContainer>
      <NotificationBoard id="first" />
    </div>
  }
}
export default () => <App />
Fn(splitAt)
default: undefined
Called when the <SplitContainer /> is resized.
When resizeProxy=true, onResize will only be called when the splitbar is dropped. This helps improve performance quite a bit, even more so in scenarios with complex layouts inside the <SplitContainer />.
However, when resizeProxy=false, the onResize is called on every mouse move when the splitbar needs adjustment, so it can be quite heavy in DOM operations.
import React from 'react'
import SplitContainer, { Splitter, Side } from '@zippytech/react-toolkit/SplitContainer'
import '@zippytech/react-toolkit/SplitContainer/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
class App extends React.Component {
  render() {
    return <div>
      <SplitContainer
        resizeProxy={false}
        onResize={() => zippy.notification.first.addNotification({
          content: 'onResize called',
          style: { marginTop: 56 }
        })}
        orientation="vertical"
        defaultSplitAt="60%"
        minSize={50}
        style={{ height: 500 }}
      >
        <Side style={{ padding: 10, background: '#d1dae0', color: '#1F2D3D' }} >
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI
            components built with React and that can be easily integrated into
            existing or new applications.
          </p>
          <p>
            We've gone through a lot of iterations to make sure we provide a rich
            and flexible component set that is actually useful and help you
            speed-up app development.
          </p>
          <p>
            We focus on building components, so you can focus on what actually
            matters to you - building & shipping your app faster to the market.
          </p>
          <p>
            You can navigate this documentation either by using the side menu on
            the left, or the next/prev links below, or you can press the{' '}
            <code>n</code> key (from next) or the <code>p</code> key (from prev)
            to navigate to the next/prev page in the docs.
          </p>
        </Side>

        <Side style={{ padding: 10, background: '#556a8e', color: 'white' }} >
          <p>
            When we started building the toolkit, we've made a checklist of
            features that our components need to include out-of-the-box:
          </p>
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job
              quickly. This will generally not be a problem with smaller
              components like buttons, dialogs, color pickers, etc - but menus,
              lists and grids need a lot of performance considerations in order
              to be really snappy.
            </li>

            <li>
              <b>Flexibility & extensibility</b> - all components need to be
              very flexible in adapting to a wide spectrum of needs. Changing
              some styles, replacing some rendering logic or adding a custom
              validation should all be possible and easily achievable.
            </li>
          </ul>
        </Side>
      </SplitContainer>
      <NotificationBoard id="first" />
    </div>
  }
}

export default () => <App />
Bool
default: false
If specifies, adds the zippy-react-toolkit-split-container--bordered css className, which, in the default theme adds a 1px border to the <SplitContainer /> component.
import React from 'react'
import SplitContainer from '@zippytech/react-toolkit/SplitContainer'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/SplitContainer/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      bordered: true
    }
  }

  render() {
    return <div>

      <div style={{marginBottom: 20}}>
        <CheckBox
          checked={this.state.bordered}
          onChange={(bordered) => {
            this.setState({
              bordered
            })
          }}
        >
          Bordered
        </CheckBox>
      </div>
      <SplitContainer
        bordered={this.state.bordered}
        orientation="vertical"
        defaultSplitAt="50%"
      >
        <SplitContainer.Side style={{ padding: 10, background: '#d1dae0', color: '#1F2D3D' }} >
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI
            components built with React and that can be easily integrated into
            existing or new applications.
          </p>
          <p>
            We've gone through a lot of iterations to make sure we provide a rich
            and flexible component set that is actually useful and help you
            speed-up app development.
          </p>
          <p>
            We focus on building components, so you can focus on what actually
            matters to you - building & shipping your app faster to the market.
          </p>
          <p>
            You can navigate this documentation either by using the side menu on
            the left, or the next/prev links below, or you can press the{' '}
            <code>n</code> key (from next) or the <code>p</code> key (from prev)
            to navigate to the next/prev page in the docs.
          </p>
        </SplitContainer.Side>

        <SplitContainer.Side style={{ padding: 10, background: '#556a8e', color: 'white' }} >
          <p>
            When we started building the toolkit, we've made a checklist of
            features that our components need to include out-of-the-box:
          </p>
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job
              quickly. This will generally not be a problem with smaller
              components like buttons, dialogs, color pickers, etc - but menus,
              lists and grids need a lot of performance considerations in order
              to be really snappy.
            </li>

            <li>
              <b>Flexibility & extensibility</b> - all components need to be
              very flexible in adapting to a wide spectrum of needs. Changing
              some styles, replacing some rendering logic or adding a custom
              validation should all be possible and easily achievable.
            </li>
          </ul>
        </SplitContainer.Side>
      </SplitContainer>
    </div>
  }
}

export default () => <App />
String
default: undefined
A css className to be appended to the <SplitContainer /> component.
import React from 'react'
import SplitContainer from '@zippytech/react-toolkit/SplitContainer'
import '@zippytech/react-toolkit/SplitContainer/index.css'

export default () => {
  return <div>
    <SplitContainer
      className="global-split-container-class-name-white"
      orientation="horizontal" style={{height: 500}} defaultSplitAt="50%"
    >
      <SplitContainer.Side style={{ padding: 10, background: '#d1dae0' }} >
        <p>
          Zippytech React Toolkit is designed to be a comprehensive set of rich UI
          components built with React and that can be easily integrated into
          existing or new applications.
        </p>
        <p>
          We've gone through a lot of iterations to make sure we provide a rich
          and flexible component set that is actually useful and help you
          speed-up app development.
        </p>
        <p>
          We focus on building components, so you can focus on what actually
          matters to you - building & shipping your app faster to the market.
        </p>
        <p>
          You can navigate this documentation either by using the side menu on
          the left, or the next/prev links below, or you can press the{' '}
          <code>n</code> key (from next) or the <code>p</code> key (from prev)
          to navigate to the next/prev page in the docs.
        </p>
      </SplitContainer.Side>

      <SplitContainer.Side style={{ padding: 10, background: '#556a8e' }} >
        <p>
          When we started building the toolkit, we've made a checklist of
          features that our components need to include out-of-the-box:
        </p>
        <ul>
          <li>
            <b>Performance</b> - a component is only useful if it does its job
            quickly. This will generally not be a problem with smaller
            components like buttons, dialogs, color pickers, etc - but menus,
            lists and grids need a lot of performance considerations in order
            to be really snappy.
          </li>

          <li>
            <b>Flexibility & extensibility</b> - all components need to be
            very flexible in adapting to a wide spectrum of needs. Changing
            some styles, replacing some rendering logic or adding a custom
            validation should all be possible and easily achievable.
          </li>
        </ul>
      </SplitContainer.Side>
    </SplitContainer>
  </div>
}
Object
default: undefined
A style object applied to the <SplitContainer /> component.
import React from 'react'
import SplitContainer from '@zippytech/react-toolkit/SplitContainer'
import '@zippytech/react-toolkit/SplitContainer/index.css'

export default () => {
  return <div>
    <SplitContainer
      defaultSplitAt="50%"
      orientation="horizontal"
      style={{ color: 'white' }}
    >
      <SplitContainer.Side style={{ padding: 10, background: '#d1dae0' }} >
        <p>
          Zippytech React Toolkit is designed to be a comprehensive set of rich UI
          components built with React and that can be easily integrated into
          existing or new applications.
        </p>
        <p>
          We've gone through a lot of iterations to make sure we provide a rich
          and flexible component set that is actually useful and help you
          speed-up app development.
        </p>
        <p>
          We focus on building components, so you can focus on what actually
          matters to you - building & shipping your app faster to the market.
        </p>
        <p>
          You can navigate this documentation either by using the side menu on
          the left, or the next/prev links below, or you can press the{' '}
          <code>n</code> key (from next) or the <code>p</code> key (from prev)
          to navigate to the next/prev page in the docs.
        </p>
      </SplitContainer.Side>

      <SplitContainer.Side style={{ padding: 10, background: '#556a8e' }} >
        <p>
          When we started building the toolkit, we've made a checklist of
          features that our components need to include out-of-the-box:
        </p>
        <ul>
          <li>
            <b>Performance</b> - a component is only useful if it does its job
            quickly. This will generally not be a problem with smaller
            components like buttons, dialogs, color pickers, etc - but menus,
            lists and grids need a lot of performance considerations in order
            to be really snappy.
          </li>

          <li>
            <b>Flexibility & extensibility</b> - all components need to be
            very flexible in adapting to a wide spectrum of needs. Changing
            some styles, replacing some rendering logic or adding a custom
            validation should all be possible and easily achievable.
          </li>
        </ul>
      </SplitContainer.Side>
    </SplitContainer>
  </div>
}
Fn()
undefined
Tries to blur the <SplitContainer />
Fn(index: Number)
undefined
Calling this method collapses the specified side of the <SplitContainer />. Valid values are 0 and 1.
import React from 'react'
import SplitContainer from '@zippytech/react-toolkit/SplitContainer'
import '@zippytech/react-toolkit/SplitContainer/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  render() {
    return <div>
      <Button onClick={()=>{this.splitcontainer && this.splitcontainer.expand(0)}}>Expand left</Button>
      <Button onClick={()=>{this.splitcontainer && this.splitcontainer.expand(1)}}>Expand right</Button>
      <Button onClick={()=>{this.splitcontainer && this.splitcontainer.collapse(0)}}>Collapse left</Button>
      <Button onClick={()=>{this.splitcontainer && this.splitcontainer.collapse(1)}}>Collapse right</Button>
      <SplitContainer
        orientation="vertical"
        ref={splitcontainer => {this.splitcontainer = splitcontainer}}
        style={{height: 500}}
        defaultSplitAt="50%"
      >
        <SplitContainer.Side style={{ padding: 10, background: '#d1dae0' }} >
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI
            components built with React and that can be easily integrated into
            existing or new applications.
          </p>
          <p>
            We've gone through a lot of iterations to make sure we provide a rich
            and flexible component set that is actually useful and help you
            speed-up app development.
          </p>
          <p>
            We focus on building components, so you can focus on what actually
            matters to you - building & shipping your app faster to the market.
          </p>
          <p>
            You can navigate this documentation either by using the side menu on
            the left, or the next/prev links below, or you can press the{' '}
            <code>n</code> key (from next) or the <code>p</code> key (from prev)
            to navigate to the next/prev page in the docs.
          </p>
        </SplitContainer.Side>

        <SplitContainer.Side style={{ padding: 10, background: '#556a8e', color: 'white' }} >
          <p>
            When we started building the toolkit, we've made a checklist of
            features that our components need to include out-of-the-box:
          </p>
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job
              quickly. This will generally not be a problem with smaller
              components like buttons, dialogs, color pickers, etc - but menus,
              lists and grids need a lot of performance considerations in order
              to be really snappy.
            </li>

            <li>
              <b>Flexibility & extensibility</b> - all components need to be
              very flexible in adapting to a wide spectrum of needs. Changing
              some styles, replacing some rendering logic or adding a custom
              validation should all be possible and easily achievable.
            </li>
          </ul>
        </SplitContainer.Side>
      </SplitContainer>
    </div>
  }
}

export default () => <App />
You should generally use the collapsedIndex controlled prop or its uncontrolled version defaultCollapsedIndex, rather then use <SplitContainer /> methods directly.
Fn(index: Number)
undefined
Calling this method expands the specified side of the <SplitContainer />. Valid values are 0 and 1.
import React from 'react'
import SplitContainer from '@zippytech/react-toolkit/SplitContainer'
import '@zippytech/react-toolkit/SplitContainer/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  render() {
    return <div>
      <Button onClick={()=>{this.splitcontainer && this.splitcontainer.expand(0)}}>Expand right</Button>
      <Button onClick={()=>{this.splitcontainer && this.splitcontainer.expand(1)}}>Expand left</Button>
      <Button onClick={()=>{this.splitcontainer && this.splitcontainer.collapse(0)}}>Collapse right</Button>
      <Button onClick={()=>{this.splitcontainer && this.splitcontainer.collapse(1)}}>Collapse left</Button>
      <SplitContainer
        orientation="vertical"
        ref={splitcontainer => {this.splitcontainer = splitcontainer}}
        style={{height: 500}}
        defaultSplitAt="50%"
      >
        <SplitContainer.Side style={{ padding: 10, background: '#d1dae0' }} >
          <p>
            Zippytech React Toolkit is designed to be a comprehensive set of rich UI
            components built with React and that can be easily integrated into
            existing or new applications.
          </p>
          <p>
            We've gone through a lot of iterations to make sure we provide a rich
            and flexible component set that is actually useful and help you
            speed-up app development.
          </p>
          <p>
            We focus on building components, so you can focus on what actually
            matters to you - building & shipping your app faster to the market.
          </p>
          <p>
            You can navigate this documentation either by using the side menu on
            the left, or the next/prev links below, or you can press the{' '}
            <code>n</code> key (from next) or the <code>p</code> key (from prev)
            to navigate to the next/prev page in the docs.
          </p>
        </SplitContainer.Side>

        <SplitContainer.Side style={{ padding: 10, background: '#556a8e', color: 'white' }} >
          <p>
            When we started building the toolkit, we've made a checklist of
            features that our components need to include out-of-the-box:
          </p>
          <ul>
            <li>
              <b>Performance</b> - a component is only useful if it does its job
              quickly. This will generally not be a problem with smaller
              components like buttons, dialogs, color pickers, etc - but menus,
              lists and grids need a lot of performance considerations in order
              to be really snappy.
            </li>

            <li>
              <b>Flexibility & extensibility</b> - all components need to be
              very flexible in adapting to a wide spectrum of needs. Changing
              some styles, replacing some rendering logic or adding a custom
              validation should all be possible and easily achievable.
            </li>
          </ul>
        </SplitContainer.Side>
      </SplitContainer>
    </div>
  }
}

export default () => <App />
You should generally use the collapsedIndex controlled prop or its uncontrolled version defaultCollapsedIndex, rather then use <SplitContainer /> methods directly.
Fn()
undefined
Tries to focus the <SplitContainer />. Can only be focused if enableKeyboardNavigation=true (which it is, by default), or if you specify a tabIndex prop.
Fn([index: Number]): Bool
undefined
If called without any parameters, returns true if any of the two sides are collapsed. If called with a parameter, returns true if the specified side is collapsed.
Fn([index: Number]): Bool
undefined
If called without any parameters, returns true if any of the two sides are expanded. If called with a parameter, returns true if the specified side is expanded.
Fn(): Bool
undefined
Returns true if the <SplitContainer /> is currently focused.