{"id":21934032,"url":"https://github.com/delete-agency/device-observer","last_synced_at":"2025-07-20T20:33:00.289Z","repository":{"id":35112827,"uuid":"208212288","full_name":"Delete-Agency/device-observer","owner":"Delete-Agency","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-06T02:09:22.000Z","size":1550,"stargazers_count":1,"open_issues_count":8,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-22T13:34:09.853Z","etag":null,"topics":["devices","resizeobserver"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/Delete-Agency.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":"2019-09-13T06:58:10.000Z","updated_at":"2022-05-09T14:44:10.000Z","dependencies_parsed_at":"2023-01-15T14:15:19.066Z","dependency_job_id":null,"html_url":"https://github.com/Delete-Agency/device-observer","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/Delete-Agency/device-observer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Delete-Agency%2Fdevice-observer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Delete-Agency%2Fdevice-observer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Delete-Agency%2Fdevice-observer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Delete-Agency%2Fdevice-observer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Delete-Agency","download_url":"https://codeload.github.com/Delete-Agency/device-observer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Delete-Agency%2Fdevice-observer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266194215,"owners_count":23890956,"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":["devices","resizeobserver"],"created_at":"2024-11-29T00:14:21.447Z","updated_at":"2025-07-20T20:33:00.261Z","avatar_url":"https://github.com/Delete-Agency.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Device Observer\n\nWhen you style you components in CSS using media queries it's quite often when for a particular component CSS \nis just not powerful enough to fulfill you needs.\nThen you have to use JS for that purpose so you copy your breakpoint and use something like \nwindow.addEventListener('resize', ...) and rely on window.outerWidth/innerWidth.\n\nBesides in some cases window.outerWidth/innerWidth can be inconsistent in different browsers (see [here](https://delete-agency.github.io/device-observer/examples/window-width-test.html))\nso relying on them is not very safe, adding another addEventListener and \"window.innerWidth \u003e 1280\" \njust makes your code less maintainable.\n\nDevice Observer allows you to configure your breakpoints once and then write media queries conditions in JS the same way you are used to in CSS\n\u003cbr\u003eIt uses window.matchMedia that always returns correct results.\nSupports both mobile and desktop-first approaches (can be configured via options).\n\n[Live Demo](https://delete-agency.github.io/device-observer/)\n\n## Installation\n\nUse the package manager [npm](https://docs.npmjs.com/about-npm/) for installation.\n\n```\n$ npm install @deleteagency/device-observer\n```\n\n## Usage\n\n```js\nconst devices = {\n\t'mobile': 0,\n\t'tablet': 768,\n\t'desktop': 1024,\n}\n\nconst deviceObserver = new DeviceObserver(devices)\n\ndeviceObserver.subscribeOnResize(() =\u003e {\n\t// this will triggered not more than ones at 50ms by default\n\tconsole.log('Do some logic on every resize');\n});\n\ndeviceObserver.subscribeOnChange((newDevice, oldDevice) =\u003e {\n\n\tif (deviceObserver.is('\u003c', 'desktop')) {\n\t\tconsole.log('Do some logic for smaller devices');\n\t} else {\n\t\tconsole.log('Do some logic for bigger devices');\n\t}\n});\n```\n\n## API\n\n### constructor(devices, options = {})\nSets options described in Options section\n\n\n#### options\n*Required*\u003cbr\u003e\nType: `Object`\n\n\n##### resizeDebounce \nDebounce time in milliseconds for handling window resize event.\u003cbr\u003e  \nDefault value - `50`.\u003cbr\u003e \nType: number\n\n\n##### mobileFirst\nWhether to use mobileFirst approach in current device determining.\u003cbr\u003e \nDefault value - `true`.\u003cbr\u003e \nType: `Boolean`\n\n\n### subscribeOnResize(cb)\nSubscribe on viewport changing with debounce time. Passed callback function will be called every time viewport is changes\n\n\n#### cb\n*Required*\u003cbr\u003e\nType: `(currentDevice) =\u003e void`\n\n\n### subscribeOnChange(cb)\nSubscribe on device change. Passed callback function will be called every time device is changes \n(in terms of user devices passed as the first argument to deviceObserver.init())\n\n\n#### cb\n*Required*\u003cbr\u003e\nType: `(newDevice, oldDevice) =\u003e void`\u003cbr\u003e \n\n\n### is(operator, deviceName) \nReturns `Boolean`\n\nJust an alias for the above methods\n\n\n#### operator\n*Required*\u003cbr\u003e\nType: `string`\u003cbr\u003e \nAllowed values: '=', '\u003e', '\u003e=', '\u003c', '\u003c='\n\n#### deviceName\n*Required*\u003cbr\u003e\nType: `string`\n\n\n## License\n[MIT](https://choosealicense.com/licenses/mit/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdelete-agency%2Fdevice-observer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdelete-agency%2Fdevice-observer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdelete-agency%2Fdevice-observer/lists"}