{"id":20027076,"url":"https://github.com/unic/factory-breakpoint-manager","last_synced_at":"2025-06-23T21:34:05.120Z","repository":{"id":28052868,"uuid":"113454360","full_name":"unic/factory-breakpoint-manager","owner":"unic","description":null,"archived":false,"fork":false,"pushed_at":"2022-11-15T23:59:22.000Z","size":508,"stargazers_count":0,"open_issues_count":10,"forks_count":2,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-02-23T10:47:20.253Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/unic.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}},"created_at":"2017-12-07T13:30:17.000Z","updated_at":"2020-03-21T11:11:31.000Z","dependencies_parsed_at":"2023-01-14T08:01:59.573Z","dependency_job_id":null,"html_url":"https://github.com/unic/factory-breakpoint-manager","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unic%2Ffactory-breakpoint-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unic%2Ffactory-breakpoint-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unic%2Ffactory-breakpoint-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unic%2Ffactory-breakpoint-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unic","download_url":"https://codeload.github.com/unic/factory-breakpoint-manager/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241460058,"owners_count":19966516,"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":[],"created_at":"2024-11-13T09:08:57.454Z","updated_at":"2025-03-02T04:41:13.787Z","avatar_url":"https://github.com/unic.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# factory-breakpoint-manager\n\nLightweight Breakpoint Manager who notifies you when the breakpoint switches or you can check for the current breakpoint.\n\n## Installation\n\n```shell\n$ npm install @unic/factory-breakpoint-manager\n```\n\n## Importing\n\n```javascript\n// ES6 Module\nimport createBreakpointManager from '@unic/factory-breakpoint-manager';\n\n// CommomJS\nconst createBreakpointManager = require('@unic/factory-breakpoint-manager').default;\n```\n\n## Usage/Quickstart\n\n```js\nimport createBreakpointManager from '@unic/factory-breakpoint-manager';\n\n// Creating a new BreakpointManager (no pun intended)\nconst BreakpointManager = createBreakpointManager({\n  breakpoints: {\n    xs: 0,\n    sm: 768,\n    md: 992,\n    lg: 1200,\n  },\n  unit: 'px'\n});\n\n// Subscribe to a breakpoint change\nconst subscriptionId = BreakpointManager.on('change', () =\u003e {\n\n  // Read the current state of your BreakpointManager\n  const currentState = BreakpointManager.getState();\n  console.log(currentState);\n\n  // Check if the breakpoint is currently value x\n  if(BreakpointManager.matches('xs')) {\n    console.log('Window width is currently between 0px and 767px');\n  }\n\n  // Check if the breakpoint is currently value x or y...\n  if(BreakpointManager.matches(['xs', 'md', 'lg'])) {\n    console.log('Window is currently on xs/md or lg');\n  }\n\n  // Check if matches is false can also result in what you need\n  if(!BreakpointManager.matches('sm')) {\n    console.log(\"Same result as when given ['xs', 'md', 'lg'] and checkig if it was true\");\n  }\n});\n\n\n// Unsubscribe at any given point\nBreakpointManager.off(subscriptionId);\n```\n\n## Best practises\n\nHaving to write your Breakpoints directly into your JS can be a real hazard to maintain, so I'd advise you to write your breakpoint configuration in a JSON file and load this json file into your JS and into your CSS preprocessor. With this you have a single source of truth for your breakpoints and it's very managable.\n\n**Good plugins to achieve this**\n* https://webpack.js.org/loaders/json-loader/ for laoding JSON into JS\n* https://github.com/acdlite/json-sass for loading JSON into SASS/SCSS\n\n## API\n\nBreakpointManager has own functionality and functionality provided by included composites.\n\n**Factory**\n[createBreakpointManager(options)](#factory)\n\n**Own methods**\n* [getState()](#getstate)\n* [matches(test)](#matches)\n\n**Observer Composite**  \nDocumentation of these methods are extern\n* [on()](https://github.com/unic/composite-observer#on)\n* [off()](https://github.com/unic/composite-observer#off)\n\n\u003ca name=\"factory\"\u003e\u003c/a\u003e\n\n### createBreakpointManager(options)\n\nCreate a new instance of a BreakpointManager\n\n**Returns**: \u003ccode\u003eObject\u003c/code\u003e - BreakpointManager\n\n| Param | Type | Description |\n| --- | --- | --- |\n| options | \u003ccode\u003eObject\u003c/code\u003e | Custom options |\n\n**Example**\n```js\nconst BreakpointManager = createBreakpointManager({\n  breakpoints: {\n    xs: 0,\n    sm: 768,\n    md: 992,\n    lg: 1200,\n  },\n  unit: 'px'\n});\n\n// Or go with em as a unit\n\nconst BreakpointManager = createBreakpointManager({\n  breakpoints: {\n    xs: 0,\n    sm: 48,\n    md: 62,\n    lg: 75,\n  },\n  unit: 'em'\n});\n```\n\n\u003ca name=\"getstate\"\u003e\u003c/a\u003e\n\n### getState()\n\nGet the current state of your BreakpointManager.\n\n**Returns**: \u003ccode\u003eObject\u003c/code\u003e - Returns current state of your BreakpointManager\n\n| Key | Type | Description |\n| --- | --- | --- |\n| width | \u003ccode\u003eInteger/Float\u003c/code\u003e | Current Window width |\n| breakpoint | \u003ccode\u003eObject\u003c/code\u003e | Current active breakpoint |\n\n**Example**\n```js\nconsole.log(BreakpointManager.getState());\n\n/*\nCould return:\n{\n  width: 823,\n  breakpoint: {\n    name: 'sm',\n    minWidth: 768\n  }\n}\n*/\n```\n\n\u003ca name=\"matches\"\u003e\u003c/a\u003e\n\n### matches(test)\n\nCheck on which breakpoint you currently are.\n\n**Returns**: \u003ccode\u003eBoolean\u003c/code\u003e - Ture if matching, false if not matching\n\n| Param | Type | Description |\n| --- | --- | --- |\n| test | \u003ccode\u003eString/Array\u003c/code\u003e | Custom options |\n\n**Example**\n```js\nif(BreakpointManager.matches('xs')) {\n  console.log('Yes! current Breakpoint is xs');\n}\n\nif(BreakpointManager.matches(['xs', 'md', 'lg'])) {\n  console.log('Current breakpoint is currently xs, md or lg');\n}\n\nif(!BreakpointManager.matches('sm')) {\n  console.log('Current breakpoint is definitely not sm');\n}\n```\n\n## Information and Ressouces about factories\n\nA factory function is simply a function that returns an object.\nFactory functions are often used in combination of composites to accomplish the factory/composition pattern.\n\nHelpful Ressources:\n* https://www.youtube.com/watch?v=ImwrezYhw4w\n* https://www.youtube.com/watch?v=wfMtDGfHWpA\n\n## Caveats\n\nBreakpointManager is using `window.innerWidth` to read the width of the frame. This also means, if you have actual content that is 'wider' than 100% of your screen, the value of your BreakpointManager might not be correct, as it's not using `document.documentElement.clientWidth` which would read the correct value, but not incorporate the scrollbar in its calculation (which would result the BreakpointManager breakpoint of 768px to trigger at different widths than your CSS breakpoint at the same value).\nTo avoid any problems, make sure you have `overflow-x: hidden` on your body, to avoid any overflow on the x-achsis, so `window.innerWidth` will always read the correct value.\n\n## License\n\nApache-2.0\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funic%2Ffactory-breakpoint-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funic%2Ffactory-breakpoint-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funic%2Ffactory-breakpoint-manager/lists"}