{"id":13808367,"url":"https://github.com/tutkli/ngx-breakpoint-observer","last_synced_at":"2025-05-07T04:43:35.649Z","repository":{"id":184613015,"uuid":"656194820","full_name":"tutkli/ngx-breakpoint-observer","owner":"tutkli","description":"Angular reactive breakpoint observer based on Signals.","archived":false,"fork":false,"pushed_at":"2025-01-20T16:49:58.000Z","size":1279,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-07T04:43:30.219Z","etag":null,"topics":["angular","breakpoints","signals"],"latest_commit_sha":null,"homepage":"https://tutkli.github.io/ngx-breakpoint-observer/","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/tutkli.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":"2023-06-20T12:49:40.000Z","updated_at":"2025-01-20T16:49:59.000Z","dependencies_parsed_at":null,"dependency_job_id":"c58ea03b-227d-410a-9d10-ecfef5b8445e","html_url":"https://github.com/tutkli/ngx-breakpoint-observer","commit_stats":null,"previous_names":["tutkli/ngx-breakpoint-observer"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tutkli%2Fngx-breakpoint-observer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tutkli%2Fngx-breakpoint-observer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tutkli%2Fngx-breakpoint-observer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tutkli%2Fngx-breakpoint-observer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tutkli","download_url":"https://codeload.github.com/tutkli/ngx-breakpoint-observer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252816517,"owners_count":21808702,"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":["angular","breakpoints","signals"],"created_at":"2024-08-04T01:01:41.135Z","updated_at":"2025-05-07T04:43:35.627Z","avatar_url":"https://github.com/tutkli.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["DOM"],"readme":"# ngx-breakpoint-observer\n\nThis library adds reactive breakpoint and media query methods based on Signals.\n\nThe code is directly inspired by [VueUse](https://vueuse.org/).\n\n## Installation\n\n```shell\nnpm install ngx-breakpoint-observer\n```\n\n## Usage\n\n```ts\nimport {\n  breakpointsTailwind,\n  injectBreakpoints,\n} from 'ngx-breakpoint-observer';\n\n@Component({})\nexport class AppComponent {\n  breakpoints = injectBreakpoints(breakpointsTailwind);\n\n  reactiveStuff = signal\u003ckeyof typeof breakpointsTailwind\u003e('sm');\n  isGreaterThanSignal = this.breakpoints.greaterOrEqual(this.reactiveStuff); // use signal without calling it!\n\n  smAndLarger = this.breakpoints.greaterOrEqual('sm'); // sm and larger\n  largerThanSm = this.breakpoints.greater('sm'); // only larger than sm\n  lgAndSmaller = this.breakpoints.smallerOrEqual('lg'); // lg and smaller\n  smallerThanLg = this.breakpoints.smaller('lg'); // only smaller than lg\n}\n```\n\n```ts\nimport { injectBreakpoints } from 'ngx-breakpoint-observer';\n\n@Component({})\nexport class AppComponent {\n  breakpoints = injectBreakpoints({\n    mobile: 0, // optional\n    tablet: 640,\n    laptop: 1024,\n    desktop: 1280,\n  });\n\n  // Can be 'mobile' or 'tablet' or 'laptop' or 'desktop'\n  activeBreakpoint = this.breakpoints.active();\n\n  // true or false\n  laptop = this.breakpoints.between('laptop', 'desktop');\n}\n```\n\n## License\n\n[MIT License](https://github.com/tutkli/ngx-breakpoint-observer/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftutkli%2Fngx-breakpoint-observer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftutkli%2Fngx-breakpoint-observer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftutkli%2Fngx-breakpoint-observer/lists"}