- Exciting release!Introducing "safe npm". Learn more →
ringside
Advanced tools
- Version published
- Maintainers
- 1
- Weekly downloads
- 576
- increased by18.52%
Weekly downloads
Changelog
Readme
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
FAQs
Positions a rectangle between inner and outer bounds
The npm package ringside receives a total of 447 weekly downloads. As such, ringside popularity was classified as not popular.
We found that ringside demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.