{"id":19917381,"url":"https://github.com/uditalias/propserver","last_synced_at":"2025-05-03T06:30:49.039Z","repository":{"id":57331796,"uuid":"127336840","full_name":"uditalias/propserver","owner":"uditalias","description":"A Responsive way to observe DOM element properties 🕶","archived":false,"fork":false,"pushed_at":"2018-04-08T18:36:26.000Z","size":648,"stargazers_count":18,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-07T11:51:35.708Z","etag":null,"topics":["observer","property"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/uditalias.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-29T19:16:08.000Z","updated_at":"2024-05-23T14:53:36.000Z","dependencies_parsed_at":"2022-09-05T08:00:56.963Z","dependency_job_id":null,"html_url":"https://github.com/uditalias/propserver","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uditalias%2Fpropserver","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uditalias%2Fpropserver/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uditalias%2Fpropserver/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uditalias%2Fpropserver/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/uditalias","download_url":"https://codeload.github.com/uditalias/propserver/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252154732,"owners_count":21702982,"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":["observer","property"],"created_at":"2024-11-12T21:49:39.405Z","updated_at":"2025-05-03T06:30:48.573Z","avatar_url":"https://github.com/uditalias.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003cimg src='https://raw.githubusercontent.com/uditalias/propserver/master/assets/propserver.png' height='100' alt='Propserver Logo' /\u003e\n\n### A Responsive way to observe DOM element properties 🕶\n\n![propserver](https://img.shields.io/npm/v/propserver.svg?style=flat-square)\n[![Travis](https://img.shields.io/travis/uditalias/propserver.svg?style=flat-square)](https://travis-ci.org/uditalias/propserver)\n\n\n## What is it good for?\n\nSometimes you want to be notified on each frame about a property change so you can handle things in a more responsive way. Consider when you have an element on a page, and you want to check its `offsetTop` property so you know when the element is inside/outside the viewport. You can observe the element's `offsetTop` with propserver and be notified when it changes.\n\n**This module should be used on the client side**\n\n## Install\nInstall via npm with\n```sh\n$ npm install --save propserver\n```\n\n## What makes it responsive?\n\nAs you know, calling `requestAnimationFrame` to request an animation frame helps us to optimize operations and\nqueries on the DOM, since the browser waits for the next frame to render in order to run our callbacks. However,\nwhen requesting many animation frames synchronously, the browser will stack all the repeated request animation frames.  \nWhen you create more than one observer, all animation frames are managed in a timeline so only one `requestAnimationFrame` gets called. \n\n## Creating property observer\n```javascript\nimport { createObserver } from \"propserver\";\n\n// get notified when $anything.offsetTop is changes\nfunction callback(value, prevValue) {\n    console.log(value, prevValue);\n}\n\n// create property ovserver\nconst observer = createObserver($anything, \"offsetTop\", callback);\n\n// start observing for $anything.offsetTop changes\nobserver.observe();\n\n// disconnect the observer when you finish\nobserver.disconnect();\n```\n\n## API\n\n**createObserver(target, property, callback)**\n\nFactory function to create a property observer.\n\n| Name | Type | Required | Description |\n| - | - | - | - |\n| target | Object | true | the target that holds the property |\n| property | String | true | the property to observe on the target |\n| callback | Function | true | a callback function to be called when the target property changes    `function (newValue, oldValue) {}` |\n\n**createObserver(propertyGetter, callback)**\n\n| Name | Type | Required | Description |\n| - | - | - | - |\n| property getter | Function | true | a function to get the property |\n| callback | Function | true | a callback function to be called when the property changes  `function (newValue, oldValue) {}` |\n\nThe second way to create an observer is with a property-getter function. This method is for cases where\nyou want to run a function to get the value, like where the property is not a direct property of your target.  \nHere is a property-getter example:\n\n```javascript\n() =\u003e {\n    const { top } = target.getBoundingClientRect();\n    return top;\n}\n```\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuditalias%2Fpropserver","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuditalias%2Fpropserver","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuditalias%2Fpropserver/lists"}