interserver-svelte
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.2 • Public • Published

    Interserver Svelte

    npm package npm bundle size NPM GitHub last commit

    IntersectionObserver simplified

    Checkout the main interserver package.

    Features

    • Tiny (~1kb minified)
    • TypeScript ready

    Installation

    With yarn:

    yarn add interserver-svelte

    With npm:

    npm install --save interserver-svelte

    Usage

    The createInterserver function takes the same options as the interserver function (top, right, bottom, left and once).

    <script>
      import createInterserver from 'interserver-svelte';
     
      let container;
     
      const intersecting = createInterserver(() => container);
     
      $: if ($intersecting) {
        console.log("Now you see me!");
      } else {
        console.log("Oh, the darkness...");
      }
    </script> 
     
    <div bind:this={container}>
      ...
    </div>

    Example

    You can build a LazyImage component, that only requests an image, when it is approaching the viewport:

    <!-- LazyImage.svelte -->
    <script>
      import createInterserver from 'interserver-svelte';
     
      export let alt = '';
      export let src = '';
      export let srscet = null;
     
      let container;
     
      const intersecting = createInterserver(() => container, {
        once: true,
        top: 50,
        right: 50,
        bottom: 50,
        left: 50,
      });
     
      $: src = $intersecting ? src : null;
      $: srcset = $intersecting ? srcset : null;
    </script> 
     
    <img {...$$props} {src} {srcset} {altbind:this={container} />

    License

    MIT

    Install

    npm i interserver-svelte

    DownloadsWeekly Downloads

    1

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    15.2 kB

    Total Files

    7

    Last publish

    Collaborators

    • mefechoel