" 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 application.
Add the following to the :dependencies vector in your project.clj file.
[breaking-point "0.1.2"]And in your ns:
(ns your-ns
(:require [breaking-point.core :as bp]))
::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:
(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.
(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 >= 1200Note, ::bp/set-breakpoints should only be dispatched once when
the application first loads.
Create a new re-frame application and add the +breaking-point option.
lein new re-frame foo +breaking-point
If you have questions, I can usually be found hanging out in the clojurians #reagent slack channel (my handle is @gadfly361).
Copyright © 2018 Matthew Jaoudi
Distributed under the The MIT License (MIT).
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent