- Notifications
You must be signed in to change notification settings - Fork23
🌿 1Kb DOM element size sensor which will callback when size changed.
NotificationsYou must be signed in to change notification settings
hustcc/size-sensor
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
DOM element size sensor which will callback when the element size changed.
DOM 元素尺寸监听器，当元素尺寸变化的时候，将会触发回调函数！
- rc-size-sensor: React component wrapper.
npm i --save size-sensor
Then import it.
import{bind,clear}from'size-sensor';
or import it byscript in HTML, then getsizeSensor on window.
<scriptsrc="https://unpkg.com/size-sensor/dist/size-sensor.min.js"></script>
- bind & unbind
import{bind,clear}from'size-sensor';// bind the event on element, will get the `unbind` functionconstunbind1=bind(document.querySelector('.container'),element=>{// do what you want to to.});constunbind2=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);
There is only 2 API:
- bind(element, callback)
Bind the resize trigger function on element. The function will returnunbind function.
- clear(element)
Clear all the object and resize event on element.
The size sensor strategies include:
ResizeObserver: useresizeObserver to observe element's size.object: useobject document's resize event.
IfResizeObserver exists, use it, else useobject as default.
Online demo clickhere. Used By:
ISC@hustcc.
About
🌿 1Kb DOM element size sensor which will callback when size changed.
Topics
Resources
Stars
Watchers
Forks
Packages0
No packages published