ringside

A library that determines the fit and positioning of a rectangle relative to inner and outer bounds.

Installation

npm install ringside

Usage

Here's how you might generate the positioning for a tooltip:

import Ringside from 'ringside';
 
// define our target tooltip size
const tooltipSize = {
  height: 100,
  width: 200
};
 
// grab our target element and its container
const container = document.querySelector('.container');
const target = container.querySelector('.target');
 
const ringside = new Ringside(
  target.getBoundingClientRect(),     // target bounds
  container.getBoundingClientRect(),  // container bounds
  tooltipSize.height,
  tooltipSize.width
);
 
// select all positions that will fit
const possiblePositions = ringside
  .positions()
  .filter(position => position.fits);
 
// select a position from those that fit
const [position] = possiblePositions;
 
// and use it!
const tooltipPosition = {
  top: position.top,
  left: position.left,
  height: tooltipSize.height,
  width: tooltipSize.width
};

Development

# install packages 
npm install
 
# run the storybook server 
npm run storybook
 
# run tests 
npm test