Skip to content
React splitter component, written in TypeScript.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs build Dec 20, 2018
lib fix handlebar jumps to 0 Dec 20, 2018
public allow resize Mar 29, 2017
src fix handlebar jumps to 0 Dec 20, 2018
.gitignore issue #9, #16 Aug 23, 2018
.npmignore bump version, publish to npm Dec 20, 2018
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Jun 26, 2017
CONTRIBUTING.md Create CONTRIBUTING.md Jun 26, 2017
LICENSE Create LICENSE Jun 26, 2017
README.md bump version, publish to npm Dec 20, 2018
index.js ... Apr 11, 2017
package-lock.json bump version, publish to npm Dec 20, 2018
package.json bump version, publish to npm Dec 20, 2018
tsconfig.json tsconfig Aug 23, 2018
tsconfig.prod.json build Dec 20, 2018
tslint.json issue #9, #16 Aug 23, 2018
yarn.lock issue #9, #16 Aug 23, 2018

README.md

Splitters for React

v. 1.2.0

New version changes

v. 1.1.0

New version changes

  • fixed issue with getBoundingClientRect in React 16

NPM

Demo

Install: npm install --save m-react-splitters


Splitters for React has been written in TypeScript.

This splitter supports touch screens.

There are two options how the splitter can work. You can either select to resize splitters as you are holding and dragging the handlebar, or you can postponed the resize.

Splitters can be nested, but you have to specify what positions (vertical / horizontal) are they going to be and their sizes.

Left pane's (primary) width is calculated by JavaScript, the other panel's width is set by CSS.

Usage in your projects: Please import splitters like this:

import Splitter from 'm-react-splitters';
import 'm-react-splitters/lib/splitters.css';

Vertical splitter

primaryPaneMinWidth={number}
primaryPaneMaxWidth="string" (% or px)
primaryPaneWidth="string" (% or px)

Vertical splitter

primaryPaneMinWidth={number}
primaryPaneMaxWidth="string" (% or px)
primaryPaneWidth="string" (% or px)

Horizontal splitter

primaryPaneMinHeight={number}
primaryPaneMaxHeight="string" (% or px)
primaryPaneHeight="string" (% or px)

Another options for splitter are:

  • postPoned: Boolean

    • this specifies how the resize will work
    • default is false
  • className: string

  • primaryPaneClassName: string

  • secondaryPaneClassName: string

  • dispatchResize: Boolean

    • This dispatch resize event, it is meant for other components which resize on window resize

    • it's something like temporary callback function

    • Default is false

    • or you can use:

      onDragFinished: function

  • maximizedPrimaryPane: Boolean

  • minimalizedPrimaryPane: Boolean

<Splitter
    position="horizontal"
    primaryPaneMaxHeight="80%"
    primaryPaneMinHeight={0}
    primaryPaneHeight="400px"
    dispatchResize={true}
    postPoned={true}
>    
    <Splitter
        position="vertical"
        primaryPaneMaxWidth="80%"
        primaryPaneMinWidth={0}
        primaryPaneWidth="400px"
        postPoned={false}
    >    
        <div></div>
        <div></div>
    </Splitter> 
    <div></div>
</Splitter> 
You can’t perform that action at this time.