Tiny Split View Library for Two Panels – ResizerTwo.js

ResizerTwo.js is a lightweight split-view JavaScript library for creating a two-pane layout where you can resize the width or height of exactly two elements using a draggable handle.

Features:

• Flexible Direction: Supports both horizontal (left-right) and vertical (top-bottom) resizing.
• Minimum Size Constraints: Configure minimum flex ratios to prevent panels from collapsing completely.
• Custom Handle Styling: Override default handle appearance with custom CSS properties.
• Programmatic Access: Retrieve current flex values and subscribe to resize events via callbacks.

Use Cases:

• Code Editors with Preview Panes: Build split-screen editors where users can adjust the code panel and preview panel sizes according to their workflow preferences.
• Dashboard Layouts with Resizable Sidebars: Create admin panels or analytics dashboards where users can resize navigation sidebars to focus on main content or drill into menu options.
• Documentation Viewers: Implement split interfaces for technical documentation where users can resize the table of contents alongside the main content area.
• Chat Applications with Message Lists: Design messaging interfaces where users can adjust the conversation list width relative to the active chat window based on screen real estate.

How To Use It:

1. Set up your HTML structure. You need a parent container with exactly two children.

<div class="wrapper" id="my-resizer">
  <div><!-- First Panel --></div>
  <div><!-- Second Panel --></div>
</div>

2. Install and import the ResizerTwo.js library.

# NPM
$ npm install umbr-resizer-two

import { ResizerTwo } from "umbr-resizer-two";

3. Initialize the library.

/ Get the container element
const container = document.getElementById('my-resizer');

// Create a new instance with options
const resizer = new ResizerTwo({
  // options here
});

// Add the resizer to the container
resizer.add(container);

4. Available configuration options:

Option	Type	Default	Description
direction	string	'horizontal'	The resizing direction. Can be 'horizontal' or 'vertical'.
minFlex	number	0.3	A float between 0 and 1 that defines the minimum flex ratio a panel can have. This prevents collapsing.
handleStyles	object	{}	A JavaScript object with CSS properties (in camelCase) to style the handle element.

5. API methods:

Method	Parameters	Description
add(container)	HTMLElement	Activates the resizer on the specified container. Throws an error if the container doesn’t have exactly two children.
remove()	–	Deactivates the resizer, removes the handle, and cleans up all event listeners and styles.
onResize(cb)	function	Registers a callback function that runs every time the panels are resized. Returns an unsubscribe function to remove the callback.
getFlexValues()	–	Returns an object { flexOne, flexTwo } with the current flex values of the two panels. Useful for saving state.

6. For the resizer to work correctly, you need to set up your container with proper flexbox constraints:

.wrapper {
  flex: 1;
  min-height: 0;
  min-width: 0;
}

7. Here is an advanced example with event handling:

const resize = new ResizerTwo({
  direction: "horizontal",
  minFlex: 0.3,
  handleStyles: {
    backgroundColor: "#333",
    width: "8px"
  }
});
const container = document.getElementById("resizer_container");
resize.add(container);
// Track resize events
const unsubscribe = resize.onResize(() => {
  const { flexOne, flexTwo } = resize.getFlexValues();
  console.log(`Ratio: ${flexOne.toFixed(2)} / ${flexTwo.toFixed(2)}`);
});
// Clean up after 10 seconds
setTimeout(() => {
  unsubscribe();
  resize.remove();
  console.log("Resizer removed");
}, 10000);

FAQs:

Q: Can I use ResizerTwo.js with more than two elements?
A: No, the library throws an error if your container doesn’t have exactly two children. The design choice keeps the implementation focused and lightweight. If you need multi-pane layouts, you can nest multiple ResizerTwo instances—create a container with two children where one child is itself a resizable container.

Q: Why does my resize handle disappear when I remove and re-add the resizer?
A: Make sure you’re calling remove() before calling add() again. The library throws an error if you try to add to a container when it’s already managing one. The remove() method clears all internal state, so you can safely reuse the same instance with a different container afterward.

Q: The panels won’t shrink below a certain size even with minFlex set to 0.1. What’s wrong?
A: This is usually a CSS issue. Your panels need min-height: 0 and min-width: 0 applied to both the container and the child elements. By default, flex items won’t shrink below their content’s intrinsic size. Adding these properties allows flexbox to compress the panels below their content size.

Q: How do I persist the user’s resize preferences across page reloads?
A: Use the onResize() callback to capture flex values and save them to localStorage or your backend. On page load, retrieve the saved values and manually set the flex styles before calling add():

const savedFlex = JSON.parse(localStorage.getItem("panelSizes"));
if (savedFlex) {
  container.children[0].style.flex = savedFlex.flexOne;
  container.children[1].style.flex = savedFlex.flexTwo;
}
resize.add(container);
resize.onResize(() => {
  const values = resize.getFlexValues();
  localStorage.setItem("panelSizes", JSON.stringify(values));
});

Related Resources:

• 10 Best Splitter JavaScript Libraries To Create Split Views

The post Tiny Split View Library for Two Panels – ResizerTwo.js appeared first on CSS Script.