Split Your Pages using SplitJS

A lot of website now a days, create this amazing website and your probably curios on how they split two screens and can even drag to resize the split, and you know what, some of those website is using SplitJs. You can use react, vuejs, or any framework libraries.

SplitJs is a simple and light/small sized library that makes splitting screen of your website more easier. I guarantee you this small library will be useful on your projects someday. I really like SplitJs because is a very small library, and we don't want our projects to be bloated with large sized libraries so SplitJs is a great choice for splitting screens on your websites, also the split is really customizable so you can do what ever you like with it.

To install the library, you can just install using yarn or npm.

yarn add split.js //this is for yarn
npm install --save split.js // this is for npm

To use in your project you can just import it just like this.

import Split from 'split.js'

Split(['#split-0', '#split-1'])

add the html.

<div class="split">
    <div id="split-0"></div>
    <div id="split-1"></div>
</div>

and add css, to customize your splitter.

.split {
    display: flex;
    flex-direction: row;
}

.gutter {
    background-color: #eee;
    background-repeat: no-repeat;
    background-position: 50%;
}

.gutter.gutter-horizontal {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
    cursor: col-resize;
}

Heres a example, here is the link of the CodeSandBox: https://codesandbox.io/s/romantic-fermi-fucyc?file=/src/styles.css

You can pass in options to the splitjs so that you can customize and maybe tract and save the sizes.

// split js accepts a second parameter of objects
SplitJs(["#split-0", "#split-1"], {
  sizes: [30, 70],
  minSize: [0, 0],
  elementStyle: (dimension, size, gutterSize) => {
    return {
      "flex-basis": size + "%"
    };
  },
  onDrag: () => {
    console.log("dragging");
  },
  onDragEnd: () => {
    console.log("drag end");
  }
});

Their are many options that you can use, you can check all options here, but I would like to show the options that I really like.

• sizes the initial size when you open the web app. you can save your size and throw it in the sizes options.

SplitJs(["#split-0", "#split-1"], {
  sizes: [30, 70],
});

• gutterSize the default is 10px, but this is useful because what if you want to customize your gutterSize into 0, that way you can create custom css for your gutter(the dragable portion).

SplitJs(["#split-0", "#split-1"], {
  sizes: [30, 70],
  gutterSize: 15 //will be 15px
});

• snapOffset the snap offset is very useful, it will automatically snap when drag to the max or min sizes.

SplitJs(["#split-0", "#split-1"], {
  sizes: [30, 70],
  snapOffset: 20 //it will snap at 20 percent
});

• direction this options default is horizontal but you can change it to vertical if you want vertical split. if you change it to vertical, you should also change the flex direction to column

SplitJs(["#split-0", "#split-1"], {
  sizes: [30, 70],
  direction: 'vertical' //this will change to vertical
});

• onDragEnd this is a callback function that returns the sizes after dragging the gutter.

SplitJs(["#split-0", "#split-1"], {
  sizes: [30, 70],
  onDrag: (sizes) => {
    console.log("size: ", sizes);
  },
});

• elementStyle and gutterStyle this way you can control the style of the element, and gutter.

SplitJs(["#split-0", "#split-1"], {
  sizes: [30, 70],
  elementStyle: (dimension, elementSize, gutterSize, index) => {
    return {
      "flex-basis": size + "%"
    };
  },
});
// or for vertical
SplitJs(["#split-0", "#split-1"], {
  sizes: [30, 70],
  direction: 'vertical',
  gutterStyle: () => {
    return {
        height: `0px`
    };
  },
});

If you like more like this, you can support me by buying me a coffee so that I have the motivation to scan the internet and get some useful tools that you can use on your web applications.

I would like give a shoutout and my gratitude to Robert Gehrsitz and Sergii Krukovskyi for donating on my last articles. I pray that God will bless you more.

You can comment what you want me to search next :)