https://github.com/mefechoel/interserver-svelte

IntersectionObserver simplified
https://github.com/mefechoel/interserver-svelte

Last synced: 3 months ago
JSON representation

IntersectionObserver simplified

• Host: GitHub
• URL: https://github.com/mefechoel/interserver-svelte
• Owner: mefechoel
• License: mit
• Created: 2020-05-14T10:04:56.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2020-05-14T12:56:31.000Z (about 5 years ago)
• Last Synced: 2025-03-18T19:51:25.775Z (3 months ago)
• Language: TypeScript
• Size: 51.8 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[npm]: https://img.shields.io/npm/v/interserver-svelte.svg?style=flat-square

[npm-url]: https://npmjs.com/package/interserver-svelte

# Interserver Svelte

[![npm package][npm]][npm-url]

![npm bundle size](https://img.shields.io/bundlephobia/min/interserver-svelte?style=flat-square)

![NPM](https://img.shields.io/npm/l/interserver-svelte?style=flat-square)

![GitHub last commit](https://img.shields.io/github/last-commit/mefechoel/interserver-svelte?style=flat-square)

> IntersectionObserver simplified

Checkout the main [`interserver`](https://www.npmjs.com/package/interserver) package.

## Features

- Tiny (~1kb minified)

- TypeScript ready

## Installation

With `yarn`:

```bash

yarn add interserver-svelte

```

With `npm`:

```bash

npm install --save interserver-svelte

```

## Usage

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

```html

  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...");

  }



  ...



```


## Example

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

```html

  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;



```

## License

MIT