https://github.com/gadfly361/breaking-point
BREAKING-POINT lets you quickly define and subscribe to screen (i.e. window) breakpoints in your re-frame application
https://github.com/gadfly361/breaking-point
breakpoint breakpoints clojurescript re-frame react reagent responsive responsive-design
Last synced: 2 months ago
JSON representation
BREAKING-POINT lets you quickly define and subscribe to screen (i.e. window) breakpoints in your re-frame application
- Host: GitHub
- URL: https://github.com/gadfly361/breaking-point
- Owner: gadfly361
- Created: 2018-06-18T06:41:37.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-06-22T03:36:19.000Z (almost 7 years ago)
- Last Synced: 2025-02-27T11:44:16.445Z (3 months ago)
- Topics: breakpoint, breakpoints, clojurescript, re-frame, react, reagent, responsive, responsive-design
- Language: Clojure
- Homepage:
- Size: 12.2 MB
- Stars: 40
- Watchers: 4
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGES.md
Awesome Lists containing this project
README
# BREAKING-POINT
> " I don’t know; every man has his breaking point."
> - Red, The Shawshank Redemption
BREAKING-POINT lets you quickly define and subscribe to screen breakpoints in
your [re-frame](https://github.com/Day8/re-frame)
application.
Add the following to the :dependencies vector in your project.clj file.
```clojure
[breaking-point "0.1.2"]
```
And in your ns:
```clojure
(ns your-ns
(:require [breaking-point.core :as bp]))
```
# API
## ::bp/set-breakpoints
`::bp/set-breakpoints` takes a hash-map with the following shape:
| key | type | default | required? |
|---------------------------|---------------------------------------|-----------|-----------|
| :breakpoints | [keyword int keyword int ... keyword] | | **yes** |
| :debounce-ms | int | 0 | no |
Breakpoints takes a series of keywords alternating with ints that will
be used as breakpoints. Make sure the breakpoints are **ascending** in
value. Here is an example:
```clojure
(re-frame/dispatch-sync [::bp/set-breakpoints
{;; required
:breakpoints [:mobile
768
:tablet
992
:small-monitor
1200
:large-monitor]
;; optional
:debounce-ms 166
}])
```
You can have as many breakpoints as you want and name them
whatever you want, just be sure to alternate keywords with *ascending* ints.
When you disptach `::bp/set-breakpoints`, it will register
subscriptions based on the provided keywords and breakpoints that you
supplied.
```clojure
(re-frame/subscribe [::bp/screen-width]) ;; will be an int
(re-frame/subscribe [::bp/screen-height]) ;; will be an int
(re-frame/subscribe [::bp/screen]) ;; will be one of the following: :mobile, :tablet, :small-monitor, :large-monitor
(re-frame/subscribe [::bp/orientation]) ;; will be either :portrait or :landscape
(re-frame/subscribe [::bp/landscape?]) ;; true if width is >= height
(re-frame/subscribe [::bp/portrait?]) ;; true if height > width
;; these will be based on the breakpoint names that you provide
(re-frame/subscribe [::bp/mobile?]) ;; true if screen-width is < 768
(re-frame/subscribe [::bp/tablet?]) ;; true if screen-width is >= 768 and < 992
(re-frame/subscribe [::bp/small-monitor?]) ;; true if window width is >= 992 and < 1200
(re-frame/subscribe [::bp/large-monitor?]) ;; true if window width is >= 1200
```
Note, `::bp/set-breakpoints` should only be dispatched **once** when
the application *first* loads.
# Usage
Create a new re-frame application and add the `+breaking-point` option.
```
lein new re-frame foo +breaking-point
```
# Questions
If you have questions, I can usually be found hanging out in
the [clojurians](http://clojurians.net/) #reagent slack channel (my
handle is [@gadfly361](https://twitter.com/gadfly361)).
# License
Copyright © 2018 Matthew Jaoudi
Distributed under the The MIT License (MIT).