v0.6.1

Fixes

• move intersection observer instantiation to onMount to work in hydration use cases (#13, contributed by @nosovk)

v0.6.0

Features

• export observer prop (type IntersectionObserver)
• dispatch "intersect" event if the observed element isIntersecting the viewport

v0.5.0

Features

• Add support for Server-Side Rendering (SSR)

v0.4.0

Features

• Export intersecting prop

Fixes

• Remove observer from module context to allow multiple component instantiations (#7)
• Fix prop type for entry

Documentation

• Bind the intersecting prop in the demo / Svelte REPL, which is more concise than binding to entry

  <script>
    import IntersectionObserver from "svelte-intersection-observer";
  
    let element;
    let intersecting;
  </script>
  
  <header>
    <strong>Scroll down.</strong>
    <div>
      Element in view?
      <strong class:intersecting>{intersecting ? 'Yes' : 'No'}</strong>
    </div>
  </header>
  
  <IntersectionObserver {element} bind:intersecting>
    <div bind:this={element}>
      {#if intersecting}Element is in view{/if}
    </div>
  </IntersectionObserver>

v0.3.0

Features

• Export entry (IntersectionObserverEntry) as a reactive prop

This allows for more concise code:

<IntersectionObserver {element} bind:entry>
  <div class="element" bind:this="{element}">
    {#if entry && entry.isIntersecting}
      Element is in view
    {/if}
  </div>
</IntersectionObserver>

v0.2.0

• add TypeScript definitions