SplitViews

Utility for resizable split views

Fast, Simple and lightweight <1kb

with 0 dependencies

split views split views split views split views split views 
$ npm install split-views 
// or via yarn: 
$ yarn add split-views

What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Where can I get some? There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form,

What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry.

What is Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

.split-view {
  width: 100%;
  height: 400px;
  /*   
    display: flex; (required)
    SplitViews is flexbox based
  */
  display: flex;
}

.horizontal { 
  flex-direction: row; 
}

.vertical { 
  flex-direction: colmun; 
}
import SplitViews from 'split-views';

SplitViews({
  parent: '.split-view',
  direction: 'horizontal',
  gutterSize: 10,
  minSize: 0,
  sizes: [25, 50, 25],
  onDragEnd: (newSizes) => {
    console.log(newSizes);
  }
});

// Vertical direction
window.SplitViews({
  parent: '.split-view2',
  direction: 'vertical',
  gutterSize: 5,
  minSize: 20,
  sizes: [75, 25]
});