Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/martinnov92/React-Splitters
React splitter component, written in TypeScript.
https://github.com/martinnov92/React-Splitters
component es6 javascript js react react-component react-components react-splitters reactjs splitter ts typescript
Last synced: 3 months ago
JSON representation
React splitter component, written in TypeScript.
- Host: GitHub
- URL: https://github.com/martinnov92/React-Splitters
- Owner: martinnov92
- License: mit
- Archived: true
- Created: 2017-02-25T09:35:07.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T17:04:19.000Z (about 2 years ago)
- Last Synced: 2024-04-27T04:03:50.781Z (9 months ago)
- Topics: component, es6, javascript, js, react, react-component, react-components, react-splitters, reactjs, splitter, ts, typescript
- Language: JavaScript
- Homepage: https://martinnov92.github.io/React-Splitters/
- Size: 3.87 MB
- Stars: 160
- Watchers: 9
- Forks: 21
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-react-components - m-react-splitters - Splitter component, written in TypeScript. (UI Layout / Form Components)
- awesome-react - m-react-splitters - Splitter component, written in TypeScript.  (UI Components / Layout)
- awesome-list - m-react-splitters - React splitter component, written in TypeScript. (Soluções / Form Components)
- awesome-react-components - m-react-splitters - Splitter component, written in TypeScript. (UI Layout / Form Components)
- awesome-react-components - m-react-splitters - React splitter component, written in TypeScript. (UI Layout / Form Components)
- awesome-react-components - m-react-splitters - Splitter component, written in TypeScript. (UI Layout / Form Components)
- fucking-awesome-react-components - m-react-splitters - Splitter component, written in TypeScript. (UI Layout / Form Components)
- awesome-react-components - m-react-splitters - Splitter component, written in TypeScript. (UI Layout / Form Components)
- awesome-react-components - m-react-splitters - Splitter component, written in TypeScript. (UI Layout / Form Components)
README
# Splitters for React
v. 1.2.0
**New version changes**
* fixed [issue](https://github.com/martinnov92/React-Splitters/issues/15)
v. 1.1.0
**New version changes**
* fixed issue with `getBoundingClientRect` in React 16
[NPM](https://www.npmjs.com/package/m-react-splitters)
[Demo](https://martinnov92.github.io/React-Splitters/)
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
```js
primaryPaneMinWidth={number}
primaryPaneMaxWidth="string" (% or px)
primaryPaneWidth="string" (% or px)
```
Vertical splitter
```js
primaryPaneMinWidth={number}
primaryPaneMaxWidth="string" (% or px)
primaryPaneWidth="string" (% or px)
```
Horizontal splitter
```js
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
```tsx
```