{"id":16231539,"url":"https://github.com/hustcc/size-sensor","last_synced_at":"2025-04-12T22:36:16.261Z","repository":{"id":57115474,"uuid":"136256864","full_name":"hustcc/size-sensor","owner":"hustcc","description":":herb: 1Kb DOM element size sensor which will callback when size changed.","archived":false,"fork":false,"pushed_at":"2024-06-04T05:36:59.000Z","size":55,"stargazers_count":164,"open_issues_count":1,"forks_count":23,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-08T15:46:32.002Z","etag":null,"topics":["element-resize-event","resize","resize-observer","sensor","size-sensor"],"latest_commit_sha":null,"homepage":"https://git.hust.cc/size-sensor","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hustcc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-06T01:52:49.000Z","updated_at":"2025-02-11T15:50:37.000Z","dependencies_parsed_at":"2023-11-15T00:06:21.753Z","dependency_job_id":"8b8b3368-4196-4746-94b9-58950232fbd9","html_url":"https://github.com/hustcc/size-sensor","commit_stats":{"total_commits":53,"total_committers":7,"mean_commits":7.571428571428571,"dds":0.1132075471698113,"last_synced_commit":"e5cbb27b591af7e4695f0b63600c548d08c9f732"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hustcc%2Fsize-sensor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hustcc%2Fsize-sensor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hustcc%2Fsize-sensor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hustcc%2Fsize-sensor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hustcc","download_url":"https://codeload.github.com/hustcc/size-sensor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248545908,"owners_count":21122240,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["element-resize-event","resize","resize-observer","sensor","size-sensor"],"created_at":"2024-10-10T13:06:00.398Z","updated_at":"2025-04-12T22:36:16.235Z","avatar_url":"https://github.com/hustcc.png","language":"JavaScript","readme":"# [size-sensor](https://git.hust.cc/size-sensor/)\n\n\u003e DOM element size sensor which will callback when the element size changed.\n\u003e\n\u003e DOM 元素尺寸监听器，当元素尺寸变化的时候，将会触发回调函数！\n\n\n[![Build Status](https://github.com/hustcc/size-sensor/workflows/build/badge.svg)](https://github.com/hustcc/size-sensor/actions)\n[![npm](https://img.shields.io/npm/v/size-sensor.svg)](https://www.npmjs.com/package/size-sensor)\n[![npm](https://img.shields.io/npm/dm/size-sensor.svg)](https://www.npmjs.com/package/size-sensor)\n[![gzip](http://img.badgesize.io/https://unpkg.com/size-sensor/dist/size-sensor.min.js?compression=gzip)](https://unpkg.com/size-sensor/dist/size-sensor.min.js)\n\n - [rc-size-sensor](https://www.npmjs.com/package/rc-size-sensor): React component wrapper.\n\n\n\n## Install\n\n\n\u003e npm i --save size-sensor\n\nThen import it.\n\n```js\nimport { bind, clear } from 'size-sensor';\n```\n\nor import it by `script` in HTML, then get `sizeSensor` on window.\n\n```html\n\u003cscript src=\"https://unpkg.com/size-sensor/dist/size-sensor.min.js\"\u003e\u003c/script\u003e\n```\n\n\n\n## Usage\n\n\n - **bind \u0026 unbind**\n\n```js\nimport { bind, clear } from 'size-sensor';\n\n// bind the event on element, will get the `unbind` function\nconst unbind1 = bind(document.querySelector('.container'), element =\u003e {\n  // do what you want to to.\n});\n\nconst unbind2 = bind(document.querySelector('.container'), element =\u003e {\n  // do what you want to to.\n});\n\n// if you want to cancel bind event.\nunbind1();\n```\n\n\n - **clear**\n\n```js\nimport { bind, clear } from 'size-sensor';\n\n/*\n * // bind the resize event.\n * const unbind1 = bind(...);\n * const unbind2 = bind(...);\n * ...\n */\n\n// you can cancel all the event of element.\nclear(element);\n```\n\n\n\n## API\n\n\nThere is only 2 API:\n\n\n - **bind(element, callback)**\n\nBind the resize trigger function on element. The function will return `unbind` function.\n\n - **clear(element)**\n\nClear all the object and resize event on element.\n\n\n\n## Strategies\n\nThe size sensor strategies include:\n\n - `ResizeObserver`: use [resizeObserver](src/sensors/resizeObserver.js) to observe element's size.\n - `object`: use [object](src/sensors/object.js) document's resize event.\n\nIf `ResizeObserver` exists, use it, else use `object` as default.\n\n\n\n## Let me know\n\nOnline demo click [here](https://git.hust.cc/size-sensor). Used By:\n\n - [Ant Design Charts](https://github.com/ant-design/ant-design-charts)\n - [hustcc/echarts-for-react](https://github.com/hustcc/echarts-for-react)\n - [hustcc/canvas-nest.js](https://github.com/hustcc/canvas-nest.js)\n\n\n\n# License\n\n\nISC@[hustcc](https://github.com/hustcc).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhustcc%2Fsize-sensor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhustcc%2Fsize-sensor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhustcc%2Fsize-sensor/lists"}