Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-splitter-pane with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("prop-types/package.json"); // prop-types is a peer dependency. var reactSplitterPane = require("react-splitter-pane")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-splitter-pane v1.0.1

A simple split layout for React and modern browsers


This repo is fork of

This is only fixing the getBoundingClientRect problem across browser by below code. For everything else refer

function getPosition(elm) {
  let rect   = elm.getBoundingClientRect();
  // add window scroll position to get the offset position
  let left   = rect.left   + window.scrollX;
  let top    =    + window.scrollY;
  let right  = rect.right  + window.scrollX;
  let bottom = rect.bottom + window.scrollY;
  // polyfill missing 'x' and 'y' rect properties not returned
  // from getBoundingClientRect() by older browsers
  let x;let y;
  if ( rect.x === undefined ) x = left;
  else x = rect.x + window.scrollX;
  if ( rect.y === undefined ) y = top;
  else y = rect.y + window.scrollY;
  // width and height are the same
  let width  = rect.width;
  let height = rect.height;
  //manual adjust for if there is top to secondary div
  if (top) {
    top = top - 50;
  return { left, top, right, bottom, x, y, width, height };
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free