{"id":29584335,"url":"https://github.com/c4benni/ui-breakpoint","last_synced_at":"2026-05-09T06:05:07.751Z","repository":{"id":65517708,"uuid":"448107856","full_name":"c4benni/ui-breakpoint","owner":"c4benni","description":"A simple, configurable breakpoint class for any Web project.","archived":false,"fork":false,"pushed_at":"2022-06-18T11:43:09.000Z","size":35,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-17T05:18:06.863Z","etag":null,"topics":["breakpoint","breakpoints","dom-manipulation","react","typescript","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/c4benni.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}},"created_at":"2022-01-14T21:07:59.000Z","updated_at":"2022-04-08T21:06:37.000Z","dependencies_parsed_at":"2023-01-26T23:35:11.497Z","dependency_job_id":null,"html_url":"https://github.com/c4benni/ui-breakpoint","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/c4benni/ui-breakpoint","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c4benni%2Fui-breakpoint","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c4benni%2Fui-breakpoint/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c4benni%2Fui-breakpoint/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c4benni%2Fui-breakpoint/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/c4benni","download_url":"https://codeload.github.com/c4benni/ui-breakpoint/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c4benni%2Fui-breakpoint/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265587124,"owners_count":23793047,"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":["breakpoint","breakpoints","dom-manipulation","react","typescript","vue"],"created_at":"2025-07-20T00:31:45.199Z","updated_at":"2026-05-09T06:05:02.723Z","avatar_url":"https://github.com/c4benni.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# UiBreakpoint\nA simple, configurable breakpoint class for any Web project.\n\n## Features ✨\n\n - Optimized for perfomance (uses media queries).\n - Works with any JavaScript project.\n - Add multiple defined breakpoints eg sm, mobile, etc.\n - Supports orientation.\n \n## Config ⚙\n\nThe UiBreakpoint requires a single `object` as an argument when initializing. The properties are listed below.\n\n\u003ctable\u003e\n    \u003cthead\u003e\n        \u003ctr\u003e\n            \u003cth\u003eKey\u003c/th\u003e\n            \u003cth\u003eType\u003c/th\u003e\n            \u003cth\u003eDescription\u003c/th\u003e\n            \u003cth\u003eExample\u003c/th\u003e\n            \u003cth\u003eTip\u003c/th\u003e\n        \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd\u003econfig\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eObject\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003e\n                \u003cul\u003e\n                    \u003cli\u003e\n                        Key, Value pair of name of breakpoint, and minimum px it can have.\n                    \u003c/li\u003e\n                    \u003cli\u003e\n                        The next biggest breakpoint will automatically be the\n                        maximum px it can have.\n                    \u003c/li\u003e\n                    \u003cli\u003e\n                        The highest value in this object won't have a max-width query.\n                    \u003c/li\u003e\n                    \u003cli\u003e\n                        This object can be in any order, as it'll be sorted by value (ASC)\n                    \u003c/li\u003e\n                \u003c/ul\u003e\n            \u003c/td\u003e\n            \u003ctd\u003e\n                                        \u003cpre class=\"js\"\u003e\n{\n    config: {\n        xs: 0,\n        sm: 560,\n        md: 960,\n        lg: 1200,\n        xl: 1800,\n        cinema: 4000\n    }\n}\n                        \u003c/pre\u003e\n            \u003c/td\u003e\n            \u003ctd\u003e\n                Always use 0 as the minimum breakpoint.\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003euseOrientation\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eBoolean\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003e\n                Tell UiBreakpoint to check for orientation or not.\n            \u003c/td\u003e\n            \u003ctd\u003e\n                \u003cpre\u003e\n{\n    ...,\n    useOrientation: true\n}\n                \u003c/pre\u003e\n            \u003c/td\u003e\n            \u003ctd\u003e\n                It's \u003ccode\u003efalse\u003c/code\u003e by default\n            \u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eonChange\u003c/td\u003e\n            \u003ctd\u003e\u003ccode\u003eFunction\u003c/code\u003e\u003c/td\u003e\n            \u003ctd\u003e\n                A callback function that fires whenever there's a change in breakpoint. This could also mean there's a change in orientation if \u003ccode\u003euseOrientation\u003c/code\u003e is \u003ccode\u003etrue\u003c/code\u003e\n            \u003c/td\u003e\n            \u003ctd\u003e\n                \u003cpre\u003e\n{\n    ...,\n    onChange: e =\u003e {\n        console.log(e);\n    }\n}\n                \u003c/pre\u003e\n            \u003c/td\u003e\n            \u003ctd\u003e\n                If you're using a framework like Vue, or React, you can utilize this hook to update your Global state. \n            \u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Example 💁‍♀️\n\n \n````js\nconst screenSizes = {\n  xxs: 0,\n  xs: 320,\n  sm: 560,\n  md: 960,\n  lg: 1020,\n  xl: 1920\n}  \n\nconst breakpoint = new UiBreakpoint({\n  config: screenSizes,\n  useOrientation: true,\n  onChange: e =\u003e {\n    const isMobile = /xxs|xs|sm/.test(e.is);\n    \n    if(e.orientation == 'landscape' \u0026\u0026 isMobile){\n      alert('Only portrait mode supported!')\n    } \n    \n    // this is where you update your store to have the breakpoint globally accessible\n    // for framework lovers only.\n  }  \n})\n````\nActually, thats all about the breakpoint API.\n\nCiao 👋\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fc4benni%2Fui-breakpoint","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fc4benni%2Fui-breakpoint","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fc4benni%2Fui-breakpoint/lists"}