hustcc / Size Sensor
🌿 1Kb DOM element size sensor which will callback when size changed.
Stars: ✭ 130
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Size Sensor
Cdn
Content Delivery Network on the top of MongoDb GridFs with on-the-fly image crop/resize
Stars: ✭ 117 (-10%)
Mutual labels: resize
Ffimageloading
Image loading, caching & transforming library for Xamarin and Windows
Stars: ✭ 1,288 (+890.77%)
Mutual labels: resize
Lipo
👄 Free image manipulation API service built on top of Sharp (an alternative to Jimp, Graphics Magic, Image Magick, and PhantomJS)
Stars: ✭ 101 (-22.31%)
Mutual labels: resize
React Image File Resizer
Resize Local Images with React 🌄 🌅
Stars: ✭ 108 (-16.92%)
Mutual labels: resize
Nodemanager
Plugin for a rapid development of battery-powered sensors
Stars: ✭ 122 (-6.15%)
Mutual labels: sensor
Mini Graph Card
Minimalistic graph card for Home Assistant Lovelace UI
Stars: ✭ 1,370 (+953.85%)
Mutual labels: sensor
Androidwearmotionsensors
Using the accelerometer and gyroscope on an Android Wear device
Stars: ✭ 91 (-30%)
Mutual labels: sensor
Xiaomi Flower Care Api
Xiaomi Flower Care (MiFlora) API wrapper.
Stars: ✭ 111 (-14.62%)
Mutual labels: sensor
Sensorannotations
Android - Annotate methods to use as listeners for a sensor.
Stars: ✭ 118 (-9.23%)
Mutual labels: sensor
Sensingkit Ios
An iOS framework that provides Mobile Sensing functionality to your apps.
Stars: ✭ 93 (-28.46%)
Mutual labels: sensor
Bimg
Go package for fast high-level image processing powered by libvips C library
Stars: ✭ 1,394 (+972.31%)
Mutual labels: resize
Mergi
go library for image programming (merge, crop, resize, watermark, animate, ease, transit)
Stars: ✭ 127 (-2.31%)
Mutual labels: resize
The Grid
Grid layout custom element with drag and drop capabilities
Stars: ✭ 122 (-6.15%)
Mutual labels: resize
size-sensor
DOM element size sensor which will callback when the element size changed.
DOM 元素尺寸监听器,当元素尺寸变化的时候,将会触发回调函数!
- rc-size-sensor: React component wrapper.
Install
npm i --save size-sensor
Then import it.
import { bind, clear } from 'size-sensor';
or import it by script
in HTML, then get sizeSensor
on window.
<script src="https://unpkg.com/size-sensor/dist/size-sensor.min.js"></script>
Usage
- bind & unbind
import { bind, clear } from 'size-sensor';
// bind the event on element, will get the `unbind` function
const unbind1 = bind(document.querySelector('.container'), element => {
// do what you want to to.
});
const unbind2 = bind(document.querySelector('.container'), element => {
// do what you want to to.
});
// if you want to cancel bind event.
unbind1();
- clear
import { bind, clear } from 'size-sensor';
/*
* // bind the resize event.
* const unbind1 = bind(...);
* const unbind2 = bind(...);
* ...
*/
// you can cancel all the event of element.
clear(element);
API
There is only 2 API:
- bind(element, callback)
Bind the resize trigger function on element. The function will return unbind
function.
- clear(element)
Clear all the object and resize event on element.
Strategies
The size sensor strategies include:
-
ResizeObserver
: use resizeObserver to observe element's size. -
object
: use object document's resize event.
If ResizeObserver
exists, use it, else use object
as default.
Let me know
Online demo click here. Used By:
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].