https://github.com/andrelmlins/svelte-resize-observer

Element resize observer to Svelte
https://github.com/andrelmlins/svelte-resize-observer

library observer resize svelte

Last synced: 4 days ago
JSON representation

Element resize observer to Svelte

• Host: GitHub
• URL: https://github.com/andrelmlins/svelte-resize-observer
• Owner: andrelmlins
• License: mit
• Created: 2019-11-20T01:35:00.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T04:33:00.000Z (over 2 years ago)
• Last Synced: 2025-03-28T23:51:12.324Z (22 days ago)
• Topics: library, observer, resize, svelte
• Language: Svelte
• Homepage: https://svelte-resize-observer.netlify.com/
• Size: 752 KB
• Stars: 14
• Watchers: 1
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-svelte - Svelte Resize Observer - Detecta e informa mudanças de tamanho em elementos. (UI Componentes / Comunidade Global)

README

        
# Svelte Resize Observer

[![npm version](https://badge.fury.io/js/svelte-resize-observer.svg)](https://www.npmjs.com/package/svelte-resize-observer) • [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/andrelmlins/svelte-resize-observer/blob/master/LICENSE) • [![Build Status](https://travis-ci.com/andrelmlins/svelte-resize-observer.svg?branch=master)](https://travis-ci.com/andrelmlins/svelte-resize-observer) • [![Netlify Status](https://api.netlify.com/api/v1/badges/fbeb8033-5f7e-47cb-83e0-0fc7e89ad54b/deploy-status)](https://app.netlify.com/sites/svelte-resize-observer/deploys) • [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/andrelmlins/svelte-resize-observer.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/andrelmlins/svelte-resize-observer/context:javascript)

Element resize observer to Svelte

## Installation

```

npm i svelte-resize-observer

// OR

yarn add svelte-resize-observer

```

Note: to use this library in sapper, install as devDependency. See the [link](https://github.com/sveltejs/sapper-template#using-external-components).

## Demo [Link](https://svelte-resize-observer.netlify.com/)

Local demo:

```

git clone https://github.com/andrelmlins/svelte-resize-observer.git

cd svelte-resize-observer

npm install && npm run dev

```

## Examples

An example of how to use the library:

```js

  import ResizeObserver from "svelte-resize-observer";

  div {

    width: 400px;

    height: 400px;

  }



   console.log(e.detail.target)} />



```


## Properties

Component props:

| Prop          | Type | Description            |

| ------------- | ---- | ---------------------- |

| elementResize | node | Element to bind resize |

| resize        | func | Call with resize       |

## NPM Statistics

Download stats for this NPM package

[![NPM](https://nodei.co/npm/svelte-resize-observer.png)](https://nodei.co/npm/svelte-resize-observer/)

## License

Svelte Resize Observer is open source software [licensed as MIT](https://github.com/andrelmlins/svelte-resize-observer/blob/master/LICENSE).