{"id":17036009,"url":"https://github.com/phucbm/match-media-screen","last_synced_at":"2026-03-04T04:02:00.262Z","repository":{"id":62882317,"uuid":"563300026","full_name":"phucbm/match-media-screen","owner":"phucbm","description":"Observe window.resize and fire corresponding events with given object data.","archived":false,"fork":false,"pushed_at":"2025-07-02T13:23:32.000Z","size":407,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-15T21:06:35.458Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://match-media-screen.netlify.app","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/phucbm.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-08T10:24:58.000Z","updated_at":"2025-07-01T02:21:51.000Z","dependencies_parsed_at":"2025-02-24T04:40:59.759Z","dependency_job_id":"f0a907a5-bc7e-4643-9ba3-e315894d2b13","html_url":"https://github.com/phucbm/match-media-screen","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/phucbm/match-media-screen","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fmatch-media-screen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fmatch-media-screen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fmatch-media-screen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fmatch-media-screen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phucbm","download_url":"https://codeload.github.com/phucbm/match-media-screen/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fmatch-media-screen/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30071670,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-04T03:25:38.285Z","status":"ssl_error","status_checked_at":"2026-03-04T03:25:05.086Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-10-14T08:48:55.736Z","updated_at":"2026-03-04T04:02:00.257Z","avatar_url":"https://github.com/phucbm.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Match Media Screen\n\n[![npm version](https://badgen.net/npm/v/match-media-screen?icon=npm)](https://www.npmjs.com/package/match-media-screen)\n[![npm downloads](https://badgen.net/npm/dm/match-media-screen?icon=npm)](https://www.npmjs.com/package/match-media-screen)\n[![npm dependents](https://badgen.net/npm/dependents/match-media-screen?icon=npm)](https://www.npmjs.com/package/match-media-screen)\n[![github stars](https://badgen.net/github/stars/phucbm/match-media-screen?icon=github)](https://github.com/phucbm/match-media-screen/)\n[![jsdelivr hits](https://badgen.net/jsdelivr/hits/gh/phucbm/match-media-screen?icon=jsdelivr)](https://www.jsdelivr.com/package/gh/phucbm/match-media-screen)\n[![jsdelivr npm rank](https://badgen.net/jsdelivr/rank/npm/match-media-screen?icon=npm)](https://www.npmjs.com/package/match-media-screen)\n[![github license](https://badgen.net/github/license/phucbm/match-media-screen?icon=github)](https://github.com/phucbm/match-media-screen/blob/main/LICENSE)\n[![Made in Vietnam](https://raw.githubusercontent.com/webuild-community/badge/master/svg/made.svg)](https://webuild.community)\n\n\u003e Observe window.resize and fire corresponding events with given object data.\n\n## Installation\n\n### NPM Package\n\nInstall NPM package\n\n```shell\nnpm i match-media-screen\n```\n\nImport\n\n```js\nimport {MatchMediaScreen} from \"match-media-screen\";\n```\n\n### Download\n\n👉 Self hosted - [Download the latest release](https://github.com/phucbm/match-media-screen/releases/latest)\n\n```html\n\n\u003cscript src=\"./match-media-screen.min.js\"\u003e\u003c/script\u003e\n```\n\n👉 CDN Hosted - [jsDelivr](https://www.jsdelivr.com/package/gh/phucbm/match-media-screen)\n\n```html\n\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/phucbm/match-media-screen/dist/match-media-screen.min.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nDemo: https://match-media-screen.netlify.app\n\n```js\nnew MatchMediaScreen({\n    object: {\n        value: 'desktop',\n        responsive: [\n            {\n                breakpoint: 1024, // same as `@media only screen and (max-width:1024px)`\n                settings: {\n                    value: 'tablet',\n                }\n            },\n            {\n                breakpoint: 480,\n                settings: {\n                    value: 'mobile',\n                }\n            }\n        ],\n    },\n    debounce: 100, // [ms] debounce time on resize event\n    // fire everytime a matched breakpoint is found\n    onMatched: data =\u003e {\n        console.table(data)\n        document.querySelector('[data-code]').innerHTML = JSON.stringify(data);\n    },\n    // fire on every resize event with debouce time of 100ms\n    onUpdate: data =\u003e {\n        console.log(data)\n    }\n});\n```\n\n## Deployment\n\n### Dev server\n\nRun dev server\n\n```shell\nnpm run dev\n```\n\n### Generate production files\n\nGenerate UMD and module version\n\n```shell\nnpm run prod\n```\n\n### Build sites\n\nBuild production site\n\n```shell\nnpm run build\n```\n\n## License\n\n[MIT License](https://github.com/phucbm/match-media-screen/blob/main/LICENSE)\n\nCopyright (c) 2022 Phuc Bui\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphucbm%2Fmatch-media-screen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphucbm%2Fmatch-media-screen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphucbm%2Fmatch-media-screen/lists"}