Popularity
2.1
Growing
Activity
1.0
-
113
7
14

Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Tags: UI Layout     React     Component     React-splitter     Splitter     Splitters     Typescript     Ts     Es6    
Latest version: v1.1.0

m-react-splitters alternatives and similar libraries

Based on the "UI Layout" category

Do you think we are missing an alternative of m-react-splitters or a related project?

Add another 'UI Layout' Library

Popular Comparisons

SaaSHub - Software Alternatives and Reviews
View more from us

README

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>