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-grid-layout
A draggable and resizable grid layout with responsive breakpoints, for React. -
react-flexbox-grid
A set of React components implementing flexboxgrid with the power of CSS Modules. -
react-masonry-component
A React.js component for using @desandro's Masonry -
react-stonecutter
Animated grid layout component for React -
react-spaces
React components that allow you to divide a page or container into nestable anchored, scrollable and resizable spaces. -
hedron
A no-frills flexbox grid system for React, powered by styled-components. -
particles-bg
React particles animation background component -
react-reflex
Resizable Flex layout container components for advanced React web applications -
react-layout-components
Layout Components for React based on Flexbox -
flexbox-react
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-masonry-mixin
A React.js mixin for using @desandro's Masonry -
react-stack-grid
Pinterest like layout components for React.js. -
react-inline-grid
Predictable flexbox based grid for React. -
react-resizer
A React component for resizing HTML elements. -
Spokestack Tray
React Native component for adding Spokestack to a React Native app -
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
Appwrite - The Open Source Firebase alternative introduces iOS support
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>