alpinejs-overlap

1.0.5 • Public • Published

Alpine JS Overlap

Check if an element is overlapping another 🥞

Install

With a CDN

<script
  defer
  src="https://unpkg.com/alpinejs-overlap@latest/dist/overlap.min.js"
></script>

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

With a Package Manager

yarn add -D alpinejs-overlap

npm install -D alpinejs-overlap
import Alpine from 'alpinejs'
import overlap from 'alpinejs-overlap'

Alpine.plugin(overlap)

Alpine.start()

Example

<div class="relative">
  <div id="TargetEl" class="w-32 h-32 bg-teal-700 rounded-lg"></div>

  <div
    x-data="{ isOverlap: $overlap('#TargetEl') }"
    x-on:resize.window="isOverlap = $overlap('#TargetEl')"
    :class="{ 'bg-red-700': isOverlap, 'bg-teal-700': !isOverlap }"
    class="absolute inset-y-0 right-0 grid w-32 h-32 rounded-lg place-content-center"
  >
    <p
      x-text="isOverlap ? 'Overlapping' : 'Will Overlap'"
      class="text-sm font-medium text-white"
    ></p>
  </div>
</div>

In this example we check for an initial overlap and then use Alpine JS resize.window listener to check while resizing the window.

See the example in action on Check Elements are Overlapping - HyperJS.

Stats

Package Sidebar

Install

npm i alpinejs-overlap

Weekly Downloads

88

Version

1.0.5

License

none

Unpacked Size

4.74 kB

Total Files

9

Last publish

Collaborators

  • markmead