{"id":20083173,"url":"https://github.com/sparkbox/mediacheck","last_synced_at":"2025-04-05T03:09:31.355Z","repository":{"id":2539086,"uuid":"3516406","full_name":"sparkbox/mediaCheck","owner":"sparkbox","description":"Control JS with mediaqueries","archived":false,"fork":false,"pushed_at":"2023-03-06T13:46:53.000Z","size":747,"stargazers_count":237,"open_issues_count":15,"forks_count":40,"subscribers_count":31,"default_branch":"main","last_synced_at":"2025-03-29T02:06:06.444Z","etag":null,"topics":["hacktoberfest","matchmedia","mediaqueries"],"latest_commit_sha":null,"homepage":"http://sparkbox.github.io/mediaCheck","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/sparkbox.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":"contributing.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2012-02-22T16:29:14.000Z","updated_at":"2024-11-08T01:55:06.000Z","dependencies_parsed_at":"2023-07-05T21:16:16.976Z","dependency_job_id":null,"html_url":"https://github.com/sparkbox/mediaCheck","commit_stats":{"total_commits":85,"total_committers":17,"mean_commits":5.0,"dds":0.6470588235294117,"last_synced_commit":"3936f3f93500c88a7b9be429feb8a978c7156f45"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sparkbox%2FmediaCheck","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sparkbox%2FmediaCheck/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sparkbox%2FmediaCheck/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sparkbox%2FmediaCheck/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sparkbox","download_url":"https://codeload.github.com/sparkbox/mediaCheck/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247280272,"owners_count":20912967,"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":["hacktoberfest","matchmedia","mediaqueries"],"created_at":"2024-11-13T15:46:12.102Z","updated_at":"2025-04-05T03:09:31.328Z","avatar_url":"https://github.com/sparkbox.png","language":"JavaScript","readme":"\n```\n                      _ _        ____ _               _\n   _ __ ___   ___  __| (_) __ _ / ___| |__   ___  ___| | __\n  | '_ ` _ \\ / _ \\/ _` | |/ _` | |   | '_ \\ / _ \\/ __| |/ /\n  | | | | | |  __/ (_| | | (_| | |___| | | |  __/ (__|   \u003c\n  |_| |_| |_|\\___|\\__,_|_|\\__,_|\\____|_| |_|\\___|\\___|_|\\_\\\n```\n\nThis is a simple wrapper around matchMedia to run code on entry and exit from media queries. It also uses browser resize as a fallback for browsers that don't support matchMedia.\n\n\n## Demo\nThere are two examples here: http://sparkbox.github.io/mediaCheck/\n\n\n#### media\nType: `string`\n\nThis is the mediaquery that will trigger the specified action. It should be in the form:\n\n * `(min-width: 420px)`\n * `(min-width: 35em)`\n * `(max-width: 800px)`\n * `(max-width: 60em)`\n\n#### entry\nType: `function`\n\nThis function will execute once when the mediaquery becomes **active**.\n\n#### exit\nType: `function`\n\nThis function will execute once when the mediaquery becomes **inactive**.\n\n#### both\nType: `function`\n\nThis function will execute once when the mediaquery **changes** state.\n\n\n## Usage Example:\n\n```javascript\nmediaCheck({\n  media: '(max-width: 420px)',\n  entry: function() {\n    console.log('starting 420');\n  },\n  exit: function() {\n    console.log('leaving 420');\n  },\n  both: function() {\n    console.log('changing state');\n  }\n});\n```\n\n## Change History\n - 1.0.3\n   - Fixes a bug that caused the both function to  \n     only work on exit, but not entry.\n - 1.0.0\n   - Drop support for IE \u003c 10\n - 0.4.6\n   - You can now pass combined mediaqueries e.g. `(min-width: 320px) and (max-width: 800px)`\n   - It also now accepts `[min|max]-aspect-ratio`\n - 0.4.5\n   - Passing `mq` to `entry`, `exit`, and `both`\n\n## License\n![Creative Commons Attribution-ShareAlike 3.0 Unported License](http://i.creativecommons.org/l/by-sa/3.0/88x31.png) https://creativecommons.org/licenses/by-sa/3.0/\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsparkbox%2Fmediacheck","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsparkbox%2Fmediacheck","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsparkbox%2Fmediacheck/lists"}