{"id":21190777,"url":"https://github.com/jenssimon/breakpoint-changes-rx","last_synced_at":"2025-07-10T02:32:41.521Z","repository":{"id":37051329,"uuid":"237183982","full_name":"jenssimon/breakpoint-changes-rx","owner":"jenssimon","description":"Detect and handle breakpoint changes using RxJS Observables","archived":false,"fork":false,"pushed_at":"2024-10-29T09:44:17.000Z","size":621944,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-29T11:48:20.904Z","etag":null,"topics":["breakpoints","breakpoints-change","oberservable","rxjs"],"latest_commit_sha":null,"homepage":"","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/jenssimon.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":"2020-01-30T09:54:49.000Z","updated_at":"2024-10-17T14:16:21.000Z","dependencies_parsed_at":"2023-09-25T01:34:19.589Z","dependency_job_id":"3bed2ce0-4e52-45d0-92e5-5af1107e22d3","html_url":"https://github.com/jenssimon/breakpoint-changes-rx","commit_stats":{"total_commits":633,"total_committers":5,"mean_commits":126.6,"dds":"0.22116903633491314","last_synced_commit":"0ad5fb7b13e65f069f23609569960b6bac9266d8"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jenssimon%2Fbreakpoint-changes-rx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jenssimon%2Fbreakpoint-changes-rx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jenssimon%2Fbreakpoint-changes-rx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jenssimon%2Fbreakpoint-changes-rx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jenssimon","download_url":"https://codeload.github.com/jenssimon/breakpoint-changes-rx/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225615195,"owners_count":17496942,"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":["breakpoints","breakpoints-change","oberservable","rxjs"],"created_at":"2024-11-20T19:00:59.853Z","updated_at":"2024-11-20T19:01:48.749Z","avatar_url":"https://github.com/jenssimon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![NPM version][npm-image]][npm-url] [![Downloads][npm-downloads-image]][npm-url] [![star this repo][gh-stars-image]][gh-url] [![fork this repo][gh-forks-image]][gh-url] [![CI][gh-status-image]][gh-status-url] [![Coverage Status][coveralls-image]][coveralls-url]\n\n# breakpoint-changes-rx\n\n\u003e Detect and handle viewport changes. Using RxJS Observables\n\nYou have a responsive web site and want to handle viewport state with ease?\n\nHere we are. Handing viewport state with the help of RxJS.\n\n```typescript\nimport breakpoints, { parseBreakpoints } from 'breakpoint-changes-rx'\nimport style from './style.scss'\n\nconst breakpointDefinitions = parseBreakpoints(style)\n\nconst bps = breakpoints(breakpointDefinitions)\n\nconsole.log('current breakpoints: %o', bps.getCurrentBreakpoints())\n```\n\n## What are the current viewports?\n\n```typescript\nconsole.log(\n  breakpoints.getCurrentBreakpoints(), // [ \"md\", \"lg\" } ]\n)\n```\n\n## Install\n\n```sh\nyarn add breakpoint-changes-rx\n```\n\n## `breakpoints(breakpointDefinitions)`\n\nThis function initializes the breakpoint detection and returns an object containing following properties:\n\n- [breakpoint-changes-rx](#breakpoint-changes-rx)\n  - [What are the current viewports?](#what-are-the-current-viewports)\n  - [Install](#install)\n  - [`breakpoints(breakpointDefinitions)`](#breakpointsbreakpointdefinitions)\n    - [`breakpointsChanges$`](#breakpointschanges)\n    - [`breakpointsChangesBehavior$`](#breakpointschangesbehavior)\n    - [`getCurrentBreakpoints()`](#getcurrentbreakpoints)\n    - [`breakpointsChange(bp)`](#breakpointschangebp)\n    - [`breakpointsInRange(range)`](#breakpointsinrangerange)\n    - [`includesBreakpoints(bps)`](#includesbreakpointsbps)\n    - [`includesBreakpoint(bp)`](#includesbreakpointbp)\n  - [Configuration](#configuration)\n    - [Format](#format)\n    - [`parseBreakpoints(object, config)`](#parsebreakpointsobject-config)\n  - [License](#license)\n\nFor details about the breakpointDefinitions see [Configuration](#Configuration) section\n\n```typescript\nimport breakpoints, { parseBreakpoints } from 'breakpoint-changes-rx'\nimport style from './style.scss'\n\nconst breakpointDefinitions = parseBreakpoints(style)\n\nconst bps = breakpoints(breakpointDefinitions)\n\nconsole.log('current breakpoints: %o', bps.getCurrentBreakpoints())\n```\n\n### `breakpointsChanges$`\n\nAn [observable](https://rxjs-dev.firebaseapp.com/guide/observable) that emits a value when breakpoints change. The format of these values is\n\n```typescript\n{\n  curr: ['md'],\n  prev: ['lg'],\n}\n```\n\nUsage example:\n\n```typescript\nbps.breakpointChanges$.subscribe(({\n  curr,\n  prev,\n}) =\u003e {\n  console.log('previous breakpoint is %o, actual breakpoint is %o', prev, curr)\n})\n```\n\nCurrent and previous breakpoints are stored in arrays because it's possible to have multiple active breakpoints at the same time.\n\n### `breakpointsChangesBehavior$`\n\nThis is the same as [`breakpointsChanges$`](#breakpointsChanges$) except it is a [`BehaviorSubject`](https://rxjs-dev.firebaseapp.com/guide/subject#behaviorsubject). So when a new Observer subscribes it will immediately emit the current breakpoint data.\n\n### `getCurrentBreakpoints()`\n\nReturns the current active breakpoints as an array.\n\n```typescript\nconst current = bp.getCurrentBreakpoints()\n\nconsole.log('current breakpoints are %o', current) // e.g. ['lg']\n```\n\n### `breakpointsChange(bp)`\n\nReturns an observable that emits a `boolean` value when the given breakpoint gets entered or left.\n\n```typescript\nbp.breakpointsChange('md').subscribe((active) =\u003e {\n  console.log('breakpoint md %s', active ? 'entered' : 'left')\n})\n```\n\n### `breakpointsInRange(range)`\n\nReturns an observable that emits a `boolean` value when a range of breakpoints gets entered or left. If a change appears between the given range no value gets emitted.\n\n```typescript\nbp.breakpointsInRange(['sm', 'md']).subscribe((active) =\u003e {\n  console.log('range gets %s', active ? 'entered' : 'left')\n})\n```\n\n### `includesBreakpoints(bps)`\n\nReturns `true` if the current breakpoints contain breakpoints which are part of the given `array`.\n\n```typescript\nconsole.log('this might be a mobile device %o', bp.includesBreakpoints(['sm', 'md']))\n```\n\n### `includesBreakpoint(bp)`\n\nReturns `true` if the given breakpoint is part of the current active breakpoints.\n\n```typescript\nconsole.log('breakpoint \"md\" is active %o', bp.includesBreakpoint('md'))\n```\n\n## Configuration\n\nThis section describes the configuration used by the [breakpoints(breakpointDefinitions)](#breakpoints(breakpointDefinitions)) function using this example\n\nBreakpoint name | min    | max\n----------------|----------|----------\nsm              |          |  `767px`\nmd              |  `768px` |  `991px`\nlg              |  `991px` | `1199px`\nxl              | `1200px` |\n\n### Format\n\nThe used format for this example is shown here:\n\n```json\n{\n  \"sm\": { \"max\": \"767px\" },\n  \"md\": { \"min\": \"768px\", \"max\": \"991px\" },\n  \"lg\": { \"min\": \"992px\", \"max\": \"1199px\" },\n  \"xl\": { \"min\": \"1200px\" }\n}\n```\n\nThe values for the `min`and `max` properties can also be of type `number`. In this case pixels as unit will be omitted.\n\n### `parseBreakpoints(object, config)`\n\nThis function was created to parse breakpoint data from [exported variables of a CSS Module](https://github.com/css-modules/icss#specification).\n\n```scss\n:export {\n  breakpoint-sm-max: $bp-small-max;\n  breakpoint-md-min: $bp-medium;\n  breakpoint-md-max: $bp-medium-max;\n  breakpoint-lg-min: $bp-large;\n  breakpoint-lg-max: $bp-large-max;\n  breakpoint-xl-min: $bp-xlarge;\n}\n```\n\n```typescript\nimport { parseBreakpoints } from 'breakpoint-changes-rx'\nimport style from './style.scss'\n\nconst breakpointDefinitions = parseBreakpoints(style)\n```\n\nIt filters all properties of the passed object that matches the breakpoint pattern.\n\nThis function can use an optional configuration.\n\nName          | Description                                                                            | Default\n--------------|----------------------------------------------------------------------------------------|--------------------------------------\n`regex`       | A regular expression describing the breakpoint naming to parse                         | `/^breakpoint-(\\w*)-((max)\\|(min))$/`\n`groupName`   | The index of the capture group that contains the name of the breakpoint                | `1`\n`groupMinMax` | The capture group index that contains the identifier for min or max of the breakpoint  | `2`\n`isMin`       | A function that returns `true` if the given min/max value represents min               | `(val) =\u003e val === nameMin`\n\n## License\n\nMIT © 2023 [Jens Simon](https://github.com/jenssimon)\n\n[npm-url]: https://www.npmjs.com/package/breakpoint-changes-rx\n[npm-image]: https://badgen.net/npm/v/breakpoint-changes-rx\n[npm-downloads-image]: https://badgen.net/npm/dw/breakpoint-changes-rx\n\n[gh-url]: https://github.com/jenssimon/breakpoint-changes-rx\n[gh-stars-image]: https://badgen.net/github/stars/jenssimon/breakpoint-changes-rx\n[gh-forks-image]: https://badgen.net/github/forks/jenssimon/breakpoint-changes-rx\n[gh-status-image]: https://github.com/jenssimon/breakpoint-changes-rx/actions/workflows/ci.yml/badge.svg\n[gh-status-url]: https://github.com/jenssimon/breakpoint-changes-rx/actions/workflows/ci.yml\n\n[coveralls-url]: https://coveralls.io/github/jenssimon/breakpoint-changes-rx?branch=main\n[coveralls-image]: https://coveralls.io/repos/github/jenssimon/breakpoint-changes-rx/badge.svg?branch=main\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjenssimon%2Fbreakpoint-changes-rx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjenssimon%2Fbreakpoint-changes-rx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjenssimon%2Fbreakpoint-changes-rx/lists"}