Utility to detect whether DOM elements are overlapping or not in the viewport
Table of contents
After rewriting several approaches to solve this situation in different projects, I decided to put it in a package so I can consume it every time I needed. Really cool for simple web games where you need to check if elements are sharing at least the minimum possible amount of area in the viewport.
Add it to your application using a package manager.
# npm npm i venn-dom --save # yarn yarn add venn-dom
Compare two elements
The most simple usage is to compare two elements against each other.
import venn from 'venn-dom' const base = document.querySelector('.base--element') const compare = document.querySelector('.compare--element') venn(base, compare) // -> Boolean
Compare one element against a collection
You can also pass an array of elements or node list. The library will return an array containing one boolean per each element in the collection, representing the state of interception between the base element with the one from the collection in the same position.
import venn from 'venn-dom' const base = document.querySelector('.base--element') const list = document.querySelectorAll('.compare--element') venn(base, list) // -> Array
Example from above would also work with
- Clone or fork this repository.
- In the root folder, run
yarnto install the dependencies.
- Apply your fixes or features.
Update or add tests if necessary.
yarn testto make sure there's no regression.
- Submit a PR 🎉
You can do
yarn test --watch when working on TDD mode.
Stuff to do
The library is on early stages, if you want to collaborate, here are some ideas:
- Add better unit tests mocking client rects.
- Add linting and precommit hooks.
- The library is using standard and this format for commits.
- Run the library on some real scenarios and check out if there are issues to solve.
- Audit and apply performacne improvements if necessary.
- Any feature you think is missing ⭐️