@solid-primitives/intersection-observer

A range of IntersectionObserver API utilities great for different types of use cases:

makeIntersectionObserver - Creates a basic non-reactive Intersection Observer exposing methods to manage the observable.
createIntersectionObserver - A reactive observer primitive.
createViewportObserver - More advanced tracker that creates a store of element signals.
createVisibilityObserver - Basic visibility observer using a signal.

Installation

npm install @solid-primitives/intersection-observer
# or
yarn add @solid-primitives/intersection-observer

How to use them

makeIntersectionObserver

// Basic usage:
const { add, remove, start, stop, instance }] = makeIntersectionObserver(els, entries => {
  entries.forEach(e => console.log(e.isIntersecting));
});
add(el)

// Directive usage:
const { add: intersectionObserver } = makeIntersectionObserver([], entries => {
  entries.forEach(e => console.log(e.isIntersecting));
});
<div use:intersectionObserver></div>

Definition

function makeIntersectionObserver = (
  elements: Element[],
  onChange: IntersectionObserverCallback,
  options?: IntersectionObserverInit
): {
  add:  AddIntersectionObserverEntry,
  remove:  RemoveIntersectionObserverEntry;
  start: () =>  void;
  reset: () =>  void;
  stop: () =>  void;
  instance: IntersectionObserver;
}

createIntersectionObserver

// Basic usage:
const [add, { remove, start, stop, instance }] = createIntersectionObserver(els, entries => {
  entries.forEach(e => console.log(e.isIntersecting));
});
add(el)

// Directive usage:
const [intersectionObserver] = createIntersectionObserver()
<div use:intersectionObserver></div>

Definition

function createIntersectionObserver = (
  elements: Accessor<Element[]>,
  onChange: IntersectionObserverCallback,
  options?: IntersectionObserverInit
)

createViewportObserver

This primitive comes with a number of flexible options. You can specify a callback at the root with an array of elements or individual callbacks for individual elements.

// Basic usage:
const [add, { remove, start, stop, instance }] = createViewportObserver(els, e => {...});
add(el, e => console.log(e.isIntersecting))

// Directive usage:
const [observer] = createIntersectionObserver()
<div use:observer={(e) => console.log(e.isIntersecting)}></div>

Definition

function createVisibilityObserver = (
  element: MaybeAccessor<Element>,
  options?: IntersectionObserverInit & {
    initialValue?: boolean;
    once?: boolean;
  }
): [
  Accessor<boolean>,
  {
    start: () =>  void;
    stop: () =>  void;
    instance: IntersectionObserver
  }
]

createVisibilityObserver

const [isVisible, { start, stop, instance }] = createVisibilityObserver(() => el, { once: true });

Definition

function createViewportObserver(
  elements: MaybeAccessor<Element[]>,
  callback: EntryCallback,
  options?: IntersectionObserverInit
): CreateViewportObserverReturnValue;

Demo

You may view a working example here: https://stackblitz.com/edit/vitejs-vite-n2lwpq

Changelog

Expand Changelog

0.0.108

Committing first version of primitive.

1.0.0

Minor improvements to structure.

1.1.0

Major improvements to types and breaking changes of the interface.

1.1.1

Minor type adjustments.

1.1.2

Released with CJS support.

1.1.11

After a couple rounds, patched CJS support.

1.2.0

Patched issue with observer only firing once and disconnecting not functional.

1.2.1

Updated to Solid 1.3

1.2.2

Minor improvements

1.3.0

General improvements to bring up to latest standards.

1.4.0

Migrated to new make pattern and improved primitive structures.

npm