DEV Community

Cover image for Split Your Pages using SplitJS
Jenuel Oras Ganawed
Jenuel Oras Ganawed

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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

import Split from 'split.js'

Split(['#split-0', '#split-1'])
Enter fullscreen mode Exit fullscreen mode

add the html.

<div class="split">
    <div id="split-0"></div>
    <div id="split-1"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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");
  }
});
Enter fullscreen mode Exit fullscreen mode

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],
});
Enter fullscreen mode Exit fullscreen mode
  • 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
});
Enter fullscreen mode Exit fullscreen mode
  • 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
});
Enter fullscreen mode Exit fullscreen mode
  • 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
});
Enter fullscreen mode Exit fullscreen mode
  • 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);
  },
});
Enter fullscreen mode Exit fullscreen mode
  • 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`
    };
  },
});
Enter fullscreen mode Exit fullscreen mode

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.

Buy me Coffee Donation to Bro Jenuel

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 :)

Discussion (0)