re-frame effect handlers related to browser window.
Add [district0x/re-frame-window-fx "VERSION"]
into your project.clj
Include [district0x.re-frame.window-fx]
in your CLJS file
- :window/on-resize
- :window/stop-on-resize
- :window/on-focus
- :window/stop-on-focus
- :window/on-blur
- :window/stop-on-blur
- :window/on-hashchange
- :window/stop-on-hashchange
- :window/scroll-to
- :window/set-title
- :window/set-hash
Fires :dispatch
when browser window is resized. Can set :debounce-ms
for debouncing event, to prevent too frequent firings.
Default :debounce-ms
is 166ms.
Dispatched event receives [js/window.innerWidth js/window.innerHeight]
as a last arg.
(reg-event-fx
::my-event
(fn []
{:window/on-resize {:dispatch [::window-resized]
:debounce-ms 200
;; :id is optional
:id ::my-listener}}))
If you passed :id
into event handler above, you can stop listening by that :id
(reg-event-fx
::my-event
(fn []
{:window/stop-on-resize {:id ::my-listener}}))
Fires :dispatch
when tab/window receives focus
(reg-event-fx
::my-event
(fn []
{:window/on-focus {:dispatch [::window-focused]
;; :id is optional
:id ::my-listener}}))
If you passed :id
into event handler above, you can stop listening by that :id
Fires :dispatch
when tab/window was blurred
(reg-event-fx
::my-event
(fn []
{:window/on-blur {:dispatch [::window-blurred]
;; :id is optional
:id ::my-listener}}))
If you passed :id
into event handler above, you can stop listening by that :id
Fires :dispatch
when location hash was changed
(reg-event-fx
::my-event
(fn []
{:window/on-hashchange {:dispatch [[::window-hashchanged]
;; :id is optional
:id ::my-listener]}}))
If you passed :id
into event handler above, you can stop listening by that :id
Scroll window into x y coordinates
(reg-event-fx
::my-event
(fn []
{:window/scroll-to [100 200]}))
Change the window title
(reg-event-fx
::my-event
(fn []
{:window/set-title "New Title"}))
Change the window url hash ex. mysite.com/#<hash>
(reg-event-fx
::my-event
(fn []
{:window.location/set-hash "new-hash"}))
Tested on linux and MacOS
Type make
to see a list of common commands
make clean-all deps test
nvm use # optional
make clean-all deps
For Local Testing
Use
make test
or
make test-headless
To test using CircleCI (Recommended before pull requests)
make test-circleci