Lambda Island

Subscribe to gain access to this episode

Subscribe Login

or try out one of our freebies instead.

18. Using JavaScript libraries in ClojureScript

11. Reagent, part 3: Keys & Lifecycle Methods

We continue building a Kanban board with Reagent, adding functionality to edit cards. In the process you’ll learn all about Reagent’s cursors and event handlers.

Transcript

In Episode 9. about Reagent we ended with a mock version of our Kanban board. If you want to follow along from where we left off you can grab the code from Github. Just follow the instructions in the show notes.

All parts of the board are already there, but they don’t do anything yet, it could just as well have been static HTML. To change that we’ll be using Reagent’s cursors. Let’s get started!

Before diving into our app we’ll have to learn how cursors work. Suppose you have a single card stored in a Reagent atom, the card has the :title “Hello Island.”.

(def card-atom (r/atom {:title "Hello Island."}))

Updating it is straightforward, here’s a function that changes the card’s title. We change the atom with swap!, which takes an atom and a function to apply to the value in the atom. Any extra arguments to swap! are passed through as extra arguments to the function, so we can actually simplify this.

Now we can use this function to change the value in the atom, here’s the result.

(defn set-title! [card title]
  (swap! card assoc :title title))

;; same as
(defn set-title! [card title]
  (swap! card (fn [c] (assoc c :title title))))

(set-title! card-atom "Hello Turtles")

card-atom ;;=> #<Atom: {:title "Hello Turtles"}>

Show Notes

browse source code

The starting point of this episode is the branch ep-9-reagent, the end point is ep-10-reagent-cursors. You can follow along by starting with

git clone https://github.com/lambdaisland/kanban.git -b ep-9-reagent

Cursors

Creating cursors:

(require '[reagent.core :as r])

(r/cursor <atom> <path)

;; example
(def board (r/atom {:columns []}))

(def cols-cursor (r/cursor board [:columns]))

(swap! cols-cursor conj {:title "todos" :cards []})

@board ;;=> {:columns [{:title "todos" :cards []}]}

Reagent cookbook has a cursors recipe

Event handlers

:on-click
Called whenever an element is clicked (mdn)
:on-change
Useful on text fields, you can get the new value of the field with (fn [e] (.. e -target -value)) (mdn)
:on-blur
Called when an element loses focus (mdn)
:on-key-press
Useful to React to single key press events. Find which key was pressed with (fn [e] (.-charCode e)) (mdn)

Autofocus

The HTML attribute is called autofocus, but the DOM property is called autoFocus with a capital F.

Chart with browser support

Reagent, part 2: Cursors