Split Your Pages using SplitJS
Tags: javascript, opensource, webdev, productivity
Published: 2021-10-21 09:44:03

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](https://split.js.org/) 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`.
```bash
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.
```js
import Split from 'split.js'

Split(['#split-0', '#split-1'])
```
add the html.
```html
<div class="split">
    <div id="split-0"></div>
    <div id="split-1"></div>
</div>
```
and add css, to customize your splitter.
```css
.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

{% codesandbox romantic-fermi-fucyc %}

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

```js
// 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](https://github.com/nathancahill/split/tree/master/packages/splitjs), 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.
```js
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).
```js
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.
```js
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**
```js
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.
```js
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.
```js
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.

[![Buy me Coffee Donation to Bro Jenuel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4otqggeq1zjamy143ezw.png)](https://www.buymeacoffee.com/BroJenuel)


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