No! Primate Mutation!

    solid-laze
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.1 • Public • Published

    solid-laze

    Lazily render components in Solid

    NPM JavaScript Style Guide Open in CodeSandbox

    Install

    npm install --save solid-laze
    yarn add solid-laze

    Usage

    import { useLaze } from 'solid-laze';
    
    
    // ...
    const laze = useLaze();
    
    return (
      <div ref={laze.ref}>
        {laze.visible
          ? <h1>I am now visible!</h1>
          : <h1>I am hidden!</h1>}
      </div>
    );

    Introduction

    solid-laze defers rendering of components until they are visible in the viewport. This helps our pages to prioritize rendering the components that are critical (and already are visible) than those that are offscreen and has no impact towards the user until visible. The behavior is similar to that of idle-until-urgent pattern but the "idleness" is determined by the user's demand.

    solid-laze is useful for on-screen transitions, lazy-loading media sources, client-only components, etc..

    SSR

    There are different strategies solid-laze may help in server-side rendering.

    For instance, you can lazify images such that the "src" property is pre-rendered through "data-src" then reverted back after the image becomes visible.

    You can also force a certain element into a client-side-only render given that useLaze's visible property only becomes true on a client-side context and never on server-side.

    API

    useLaze<HTMLElement>(): { ref, visible }

    a Solid hook that observes an element and provides a visibility state.

    ref: (value: HTMLElement) => void

    A Solid ref object that captures the element to observe with. The ref isn't a plain Solid ref object but rather has "reactive" current property: when assigned, ref prompts a re-render for the component that owns it. This allows useLaze to re-evaluate everytime the observed element is attempted to be changed during the component's lifecycle (Example of this scenario includes force-remounting an element).

    visible: boolean

    A reactive boolean value that represents the state of which the element is "visible" or not in the viewport. This value only updates once after the element becomes visible, and only resets back to false if the observed element changes (assuming that the mounting element is offscreen).

    License

    MIT © lxsmnsyc

    Install

    npm i solid-laze

    DownloadsWeekly Downloads

    33

    Version

    0.3.1

    License

    MIT

    Unpacked Size

    22.4 kB

    Total Files

    15

    Last publish

    Collaborators

    • lxsmnsyc