Nine Pomeranian Monsters

    @solid-primitives/intersection-observer
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.0 • Public • Published

    Solid Primitives Intersection Observer

    @solid-primitives/intersection-observer

    lerna size size stage

    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.

    Install

    npm i @solid-primitives/intersection-observer

    DownloadsWeekly Downloads

    156

    Version

    1.4.0

    License

    MIT

    Unpacked Size

    23.9 kB

    Total Files

    10

    Last publish

    Collaborators

    • thetarnav.
    • lexlohr
    • davedbase