This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-03-10
Channels
- # aleph (1)
- # aws-lambda (1)
- # beginners (80)
- # boot (20)
- # cider (75)
- # cljs-dev (45)
- # cljsjs (1)
- # cljsrn (11)
- # clojure (428)
- # clojure-dusseldorf (13)
- # clojure-italy (4)
- # clojure-russia (153)
- # clojure-spec (47)
- # clojure-taiwan (1)
- # clojure-uk (62)
- # clojurescript (84)
- # cursive (19)
- # datascript (96)
- # datomic (75)
- # dirac (9)
- # docs (3)
- # emacs (19)
- # jobs (5)
- # jobs-discuss (20)
- # jobs-rus (17)
- # lein-figwheel (5)
- # leiningen (1)
- # liberator (4)
- # luminus (12)
- # off-topic (4)
- # om (31)
- # onyx (102)
- # pamela (1)
- # parinfer (3)
- # pedestal (3)
- # proton (1)
- # protorepl (14)
- # re-frame (54)
- # reagent (22)
- # rum (40)
- # spacemacs (2)
- # specter (8)
- # test-check (5)
- # unrepl (110)
- # untangled (80)
- # vim (3)
- # yada (46)
I'm having a bit of trouble understanding how to do a reactive component. This is the code
(def current-opacity (atom 1))
#?(:cljs (defn scrolled-vh [] ;;js/console.log
(reset! current-opacity (float (/ (.-scrollY js/window) (.-innerHeight js/window))))
(js/console.log @current-opacity)))
#?(:cljs (.addEventListener js/window "scroll" scrolled-vh))
(rum/defc video-logo < rum/reactive []
(let [opacity (rum/react @current-opacity)]
[:div {:class [(css {:width "20em"
:align-self "center"})]}
[:svg {:class [(css {:align-self "center"
:margin-bottom "1em"
:z-index "2"
:position "fixed"
:filter "drop-shadow( 2px 2px 4px rgba(0,0,0,.4))"
:margin-top "15vh"})]
:style {:opacity opacity}
:height "20em"
:width "20em"
:viewBox "0 0 1395 645"}
[:use {:xlink-href "/svg/coffs.svg#coffs"}]]]))
I am rendering both server side and client side so I realised I had to change the atom from just cljs to both to make things easier. I'm just not sure how to make the opacity in the component become reactive
I figured it out. I didnt need the let binding in there or anything
@niwinz thanks I ended up figuring it out. Slowly getting there 🙂
I asked this in the beginners but I was told I should probably ask in here. Sorry about all the nooby questions!!
I'm not sure what the best way is to invoke this method. I get that I need to hook into react for this but not sure how.
#?(:cljs (.playbackRate (. js/document (getElementById "my-video")) 0.6))
so you need to something like this:
(let [dom (.getElementById js/document "my-video")]
(set! (.-playBackRate dom) 0.6))
I’m currently trying to load some data before I render a component. How do you all accomplish this?
Right now I’m trying to load via cljs-http with go blocks and channels, but it’s not working out.
Something similar to:
(rum/defc root < rum/reactive []
(let [page (:handler (:page (rum/react state)))
user (js->clj js/window.user :keywordize-keys true)]
(case page
:page-one (ui/page-one user)
:page-two (go
(let [resp (http/post "/upload/jwurls" {:headers {"x-csrf-token" js/csrfToken}})]
(page-two user (<! resp))))
[:div "404"])))
load data in componentWillMount
render function should be pure
you can use component state to store loaded data
or better flux store (if you have one)
how big is the react app?
if you planning to do big app (10 screens or more with a lot of shared data) i will suggest you to use flux
for smaller apps it's okay to use just state of components
also i will not recommend datascript for big apps due to problems with performance
use rum/local
mixin
or rum/reactive
with map
i don't know good flux implementation in clojure
i prefer original redux but i didn't saw good cljs implementation
@niwinz: thanks again! I figured out it was a property but had no idea how to do it. My best googling left me empty handed