m-react-splitters alternatives and similar libraries
Based on the "UI Layout" category.
Alternatively, view m-react-splitters alternatives based on common mentions on social networks and blogs.
-
react-flexbox-grid
A set of React components implementing flexboxgrid with the power of CSS Modules. -
react-spaces
React components that allow you to divide a page or container into nestable anchored, scrollable and resizable spaces. -
flexbox-react
DISCONTINUED. Unopinionated, standard compliant flexbox components. You don't need to learn any propietary syntax. If you know how to use flexbox, you know how to use flexbox-react components. -
react-colrow
Smarter layout components. Based on css flexbox. Support responsive design, Typescript, server side render. 3 KB gzipped. -
react-schematic
Build responsive react layouts using styled schematics without an overhead of any theme configuration
CodeRabbit: AI Code Reviews for Developers
Do you think we are missing an alternative of m-react-splitters or a related project?
README
Splitters for React
v. 1.2.0
New version changes
- fixed issue
v. 1.1.0
New version changes
- fixed issue with
getBoundingClientRect
in React 16
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
: stringprimaryPaneClassName
: stringsecondaryPaneClassName
: stringdispatchResize
: 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
: BooleanminimalizedPrimaryPane
: 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>