Exciting release!Introducing "safe npm". Learn more
Socket
Log inDemoInstall

ringside

Package Overview
Dependencies
2
Maintainers
1
Versions
9
Issues
File Explorer

Advanced tools

ringside

Positions a rectangle between inner and outer bounds

    1.0.1latest
    GitHub

Version published
Maintainers
1
Weekly downloads
576
increased by18.52%

Weekly downloads

Changelog

Source

1.0.1 (2018-12-16)

Bug Fixes

  • vulnerabilities: Update dependencies (246eb4f)
  • Upgraded everything (aa44f17)

<a name="1.0.0"></a>

Readme

Source

ringside CircleCI

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

Keywords

FAQs

Last updated on 16 Dec 2018

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.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc