{"id":16411341,"url":"https://github.com/gadfly361/breaking-point","last_synced_at":"2025-03-16T16:32:17.300Z","repository":{"id":65350046,"uuid":"137718040","full_name":"gadfly361/breaking-point","owner":"gadfly361","description":"BREAKING-POINT lets you quickly define and subscribe to screen (i.e. window) breakpoints in your re-frame application","archived":false,"fork":false,"pushed_at":"2018-06-22T03:36:19.000Z","size":12746,"stargazers_count":40,"open_issues_count":0,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-27T11:44:16.445Z","etag":null,"topics":["breakpoint","breakpoints","clojurescript","re-frame","react","reagent","responsive","responsive-design"],"latest_commit_sha":null,"homepage":"","language":"Clojure","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/gadfly361.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.md","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":"2018-06-18T06:41:37.000Z","updated_at":"2025-02-20T20:56:43.000Z","dependencies_parsed_at":"2023-01-19T01:45:19.832Z","dependency_job_id":null,"html_url":"https://github.com/gadfly361/breaking-point","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gadfly361%2Fbreaking-point","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gadfly361%2Fbreaking-point/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gadfly361%2Fbreaking-point/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gadfly361%2Fbreaking-point/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gadfly361","download_url":"https://codeload.github.com/gadfly361/breaking-point/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243822295,"owners_count":20353500,"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","clojurescript","re-frame","react","reagent","responsive","responsive-design"],"created_at":"2024-10-11T06:45:10.349Z","updated_at":"2025-03-16T16:32:16.673Z","avatar_url":"https://github.com/gadfly361.png","language":"Clojure","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BREAKING-POINT\n\n\u003e \" I don’t know; every man has his breaking point.\"\n\u003e - Red, The Shawshank Redemption\n\nBREAKING-POINT lets you quickly define and subscribe to screen breakpoints in\nyour [re-frame](https://github.com/Day8/re-frame)\napplication.\n\nAdd the following to the :dependencies vector in your project.clj file.\n\n```clojure\n[breaking-point \"0.1.2\"]\n```\n\nAnd in your ns:\n```clojure\n(ns your-ns\n  (:require [breaking-point.core :as bp]))\n```\n\n![breaking-point gif not found](breaking-point.gif)\n\n# API\n\n## ::bp/set-breakpoints\n\n`::bp/set-breakpoints` takes a hash-map with the following shape:\n\n| key                       | type                                  | default   | required? |\n|---------------------------|---------------------------------------|-----------|-----------|\n| :breakpoints              | [keyword int keyword int ... keyword] |           | **yes**   |\n| :debounce-ms              | int                                   | 0         | no        |\n\nBreakpoints takes a series of keywords alternating with ints that will\nbe used as breakpoints. Make sure the breakpoints are **ascending** in\nvalue.  Here is an example:\n\n```clojure\n(re-frame/dispatch-sync [::bp/set-breakpoints\n                         {;; required\n                          :breakpoints [:mobile\n                                        768\n                                        :tablet\n                                        992\n                                        :small-monitor\n                                        1200\n                                        :large-monitor]\n\n                          ;; optional\n                          :debounce-ms 166\n                          }])\n```\n\nYou can have as many breakpoints as you want and name them\nwhatever you want, just be sure to alternate keywords with *ascending* ints.\n\nWhen you disptach `::bp/set-breakpoints`, it will register\nsubscriptions based on the provided keywords and breakpoints that you\nsupplied.\n\n```clojure\n(re-frame/subscribe [::bp/screen-width]) ;; will be an int\n(re-frame/subscribe [::bp/screen-height]) ;; will be an int\n(re-frame/subscribe [::bp/screen]) ;; will be one of the following: :mobile, :tablet, :small-monitor, :large-monitor\n\n(re-frame/subscribe [::bp/orientation]) ;; will be either :portrait or :landscape\n(re-frame/subscribe [::bp/landscape?]) ;; true if width is \u003e= height\n(re-frame/subscribe [::bp/portrait?]) ;; true if height \u003e width\n\n;; these will be based on the breakpoint names that you provide\n(re-frame/subscribe [::bp/mobile?]) ;; true if screen-width is \u003c 768\n(re-frame/subscribe [::bp/tablet?]) ;; true if screen-width is \u003e= 768 and \u003c 992\n(re-frame/subscribe [::bp/small-monitor?]) ;; true if window width is \u003e= 992 and \u003c 1200\n(re-frame/subscribe [::bp/large-monitor?]) ;; true if window width is \u003e= 1200\n```\n\nNote, `::bp/set-breakpoints` should only be dispatched **once** when\nthe application *first* loads.\n\n\n# Usage\n\nCreate a new re-frame application and add the `+breaking-point` option.\n\n```\nlein new re-frame foo +breaking-point\n```\n\n# Questions\n\nIf you have questions, I can usually be found hanging out in\nthe [clojurians](http://clojurians.net/) #reagent slack channel (my\nhandle is [@gadfly361](https://twitter.com/gadfly361)).\n\n# License\n\nCopyright © 2018 Matthew Jaoudi\n\nDistributed under the The MIT License (MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgadfly361%2Fbreaking-point","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgadfly361%2Fbreaking-point","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgadfly361%2Fbreaking-point/lists"}