https://github.com/kaifaty/resize-observable

Resize observable web-component
https://github.com/kaifaty/resize-observable

Last synced: 21 days ago
JSON representation

Resize observable web-component

• Host: GitHub
• URL: https://github.com/kaifaty/resize-observable
• Owner: kaifaty
• Created: 2021-06-14T12:53:44.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-09-13T07:36:29.000Z (about 3 years ago)
• Last Synced: 2024-04-24T13:56:28.343Z (7 months ago)
• Language: TypeScript
• Size: 43 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Resize observable

Zero dependence resize observable web component.

Based on ResizeOberver.

## [Demo](https://kaifaty.github.io/resize-reservable/)

Lit example: ``

## Install

```npm i resize-observable```

## Properties/Attributes

* * *

| Name        | Prop/Attr    | Type                     |  Default                 | Description             |

|-------------|--------------|:-------------------------|--------------------------|-------------------------|

| `levels`    | Prop         | `array`                  | [480, 600, 768, 1024, 1200, 1600, 1900] | Levels of container size |

## Events

* * *

## `resize`

Params:

| Name        | Type               |  Description        |

|-------------|--------------------|:---------------------|

| `width`     | number             | Levels of container size |

| `sizes`     | string             | classname of container. Has classes with levels such as before-768, aftrer-600 etc |