Dragbar

Drag to resize

Dragbar is a small client side utility for enabling users to resize adjacent elements.

Installation

npm install dragbar

or include it directly in your project if you’re not using a bundler.

Usage

//with bundler:
import dragbar from 'dragbar';

//without bundler:
import dragbar from './node_modules/dragbar/index.js';

//assuming: <div id="bar"></div>
dragbar({id: "bar"});

Function Signature

dragbar(options: Object /*optional*/);

parameters:

options: {
  id: string,
  style: Object,
  reflow: [[el: Element, ratio: Number]]
}

id is the id of the dragbar element. Will default to "dragbar" if none provided.

style is to override the default styles of the dragbar with your own. Supply a js style object.

reflow is to manage the reflow of any elements that get resized as a result of the dragbar. You provide a list of elements and ratios, and for each one, whenever the dragbar position updates, the element will flip its flex-direction between column and row depending on the aspect ratio of the element compared to the ratio provided.

For example: If the ratio provided is 2, then when width >= 2*height, flex-direction will be row, and when width < 2*height, flex-direction will be column.