mirror of https://github.com/status-im/reagent.git
Add proper codeblocks to docstrings
This commit is contained in:
parent
9695ae7add
commit
bc922f7319
|
@ -23,12 +23,16 @@
|
||||||
that any Reagent hiccup forms must be processed with as-element. For example
|
that any Reagent hiccup forms must be processed with as-element. For example
|
||||||
like this:
|
like this:
|
||||||
|
|
||||||
|
```cljs
|
||||||
(r/create-element \"div\" #js{:className \"foo\"}
|
(r/create-element \"div\" #js{:className \"foo\"}
|
||||||
\"Hi \" (r/as-element [:strong \"world!\"])
|
\"Hi \" (r/as-element [:strong \"world!\"])
|
||||||
|
```
|
||||||
|
|
||||||
which is equivalent to
|
which is equivalent to
|
||||||
|
|
||||||
[:div.foo \"Hi\" [:strong \"world!\"]]"
|
```cljs
|
||||||
|
[:div.foo \"Hi\" [:strong \"world!\"]]
|
||||||
|
```"
|
||||||
([type]
|
([type]
|
||||||
(create-element type nil))
|
(create-element type nil))
|
||||||
([type props]
|
([type props]
|
||||||
|
@ -103,6 +107,7 @@
|
||||||
"Create a component, React style. Should be called with a map,
|
"Create a component, React style. Should be called with a map,
|
||||||
looking like this:
|
looking like this:
|
||||||
|
|
||||||
|
```cljs
|
||||||
{:get-initial-state (fn [this])
|
{:get-initial-state (fn [this])
|
||||||
:component-will-receive-props (fn [this new-argv])
|
:component-will-receive-props (fn [this new-argv])
|
||||||
:should-component-update (fn [this old-argv new-argv])
|
:should-component-update (fn [this old-argv new-argv])
|
||||||
|
@ -112,6 +117,7 @@
|
||||||
:component-did-update (fn [this old-argv])
|
:component-did-update (fn [this old-argv])
|
||||||
:component-will-unmount (fn [this])
|
:component-will-unmount (fn [this])
|
||||||
:reagent-render (fn [args....])} ;; or :render (fn [this])
|
:reagent-render (fn [args....])} ;; or :render (fn [this])
|
||||||
|
```
|
||||||
|
|
||||||
Everything is optional, except either :reagent-render or :render."
|
Everything is optional, except either :reagent-render or :render."
|
||||||
[spec]
|
[spec]
|
||||||
|
@ -119,7 +125,7 @@
|
||||||
|
|
||||||
|
|
||||||
(defn current-component
|
(defn current-component
|
||||||
"Returns the current React component (a.k.a this) in a component
|
"Returns the current React component (a.k.a `this`) in a component
|
||||||
function."
|
function."
|
||||||
[]
|
[]
|
||||||
comp/*current-component*)
|
comp/*current-component*)
|
||||||
|
@ -132,14 +138,14 @@
|
||||||
|
|
||||||
(defn state
|
(defn state
|
||||||
"Returns the state of a component, as set with replace-state or set-state.
|
"Returns the state of a component, as set with replace-state or set-state.
|
||||||
Equivalent to (deref (r/state-atom this))"
|
Equivalent to `(deref (r/state-atom this))`"
|
||||||
[this]
|
[this]
|
||||||
(assert-component this)
|
(assert-component this)
|
||||||
(deref (state-atom this)))
|
(deref (state-atom this)))
|
||||||
|
|
||||||
(defn replace-state
|
(defn replace-state
|
||||||
"Set state of a component.
|
"Set state of a component.
|
||||||
Equivalent to (reset! (state-atom this) new-state)"
|
Equivalent to `(reset! (state-atom this) new-state)`"
|
||||||
[this new-state]
|
[this new-state]
|
||||||
(assert-component this)
|
(assert-component this)
|
||||||
(assert-new-state new-state)
|
(assert-new-state new-state)
|
||||||
|
@ -147,7 +153,7 @@
|
||||||
|
|
||||||
(defn set-state
|
(defn set-state
|
||||||
"Merge component state with new-state.
|
"Merge component state with new-state.
|
||||||
Equivalent to (swap! (state-atom this) merge new-state)"
|
Equivalent to `(swap! (state-atom this) merge new-state)`"
|
||||||
[this new-state]
|
[this new-state]
|
||||||
(assert-component this)
|
(assert-component this)
|
||||||
(assert-new-state new-state)
|
(assert-new-state new-state)
|
||||||
|
@ -219,8 +225,8 @@
|
||||||
Reagent atoms (or track, etc), the value will be updated whenever
|
Reagent atoms (or track, etc), the value will be updated whenever
|
||||||
the atom changes.
|
the atom changes.
|
||||||
|
|
||||||
In other words, @(track foo bar) will produce the same result
|
In other words, `@(track foo bar)` will produce the same result
|
||||||
as (foo bar), but foo will only be called again when the atoms it
|
as `(foo bar)`, but foo will only be called again when the atoms it
|
||||||
depends on changes, and will only trigger updates of components when
|
depends on changes, and will only trigger updates of components when
|
||||||
its result changes.
|
its result changes.
|
||||||
|
|
||||||
|
@ -254,8 +260,10 @@
|
||||||
|
|
||||||
Use for example like this:
|
Use for example like this:
|
||||||
|
|
||||||
|
```cljs
|
||||||
(wrap (:foo @state)
|
(wrap (:foo @state)
|
||||||
swap! state assoc :foo)
|
swap! state assoc :foo)
|
||||||
|
```
|
||||||
|
|
||||||
Probably useful only for passing to child components."
|
Probably useful only for passing to child components."
|
||||||
[value reset-fn & args]
|
[value reset-fn & args]
|
||||||
|
@ -270,18 +278,23 @@
|
||||||
|
|
||||||
Behaves like a Reagent atom but focuses updates and derefs to
|
Behaves like a Reagent atom but focuses updates and derefs to
|
||||||
the specified path within the wrapped Reagent atom. e.g.,
|
the specified path within the wrapped Reagent atom. e.g.,
|
||||||
|
|
||||||
|
```cljs
|
||||||
(let [c (cursor ra [:nested :content])]
|
(let [c (cursor ra [:nested :content])]
|
||||||
... @c ;; equivalent to (get-in @ra [:nested :content])
|
... @c ;; equivalent to (get-in @ra [:nested :content])
|
||||||
... (reset! c 42) ;; equivalent to (swap! ra assoc-in [:nested :content] 42)
|
... (reset! c 42) ;; equivalent to (swap! ra assoc-in [:nested :content] 42)
|
||||||
... (swap! c inc) ;; equivalence to (swap! ra update-in [:nested :content] inc)
|
... (swap! c inc) ;; equivalence to (swap! ra update-in [:nested :content] inc)
|
||||||
)
|
)
|
||||||
|
```
|
||||||
|
|
||||||
The first parameter can also be a function, that should look
|
The first parameter can also be a function, that should look
|
||||||
something like this:
|
something like this:
|
||||||
|
|
||||||
|
```cljs
|
||||||
(defn set-get
|
(defn set-get
|
||||||
([k] (get-in @state k))
|
([k] (get-in @state k))
|
||||||
([k v] (swap! state assoc-in k v)))
|
([k v] (swap! state assoc-in k v)))
|
||||||
|
```
|
||||||
|
|
||||||
The function will be called with one argument – the path passed to
|
The function will be called with one argument – the path passed to
|
||||||
cursor – when the cursor is deref'ed, and two arguments (path and
|
cursor – when the cursor is deref'ed, and two arguments (path and
|
||||||
|
@ -289,7 +302,7 @@
|
||||||
|
|
||||||
Given that set-get function, (and that state is a Reagent atom, or
|
Given that set-get function, (and that state is a Reagent atom, or
|
||||||
another cursor) these cursors are equivalent:
|
another cursor) these cursors are equivalent:
|
||||||
(cursor state [:foo]) and (cursor set-get [:foo]).
|
`(cursor state [:foo])` and `(cursor set-get [:foo])`.
|
||||||
|
|
||||||
Note that a cursor is lazy: its value will not change until it is
|
Note that a cursor is lazy: its value will not change until it is
|
||||||
used. This may be noticed with add-watch."
|
used. This may be noticed with add-watch."
|
||||||
|
@ -300,7 +313,7 @@
|
||||||
;; Utilities
|
;; Utilities
|
||||||
|
|
||||||
(defn rswap!
|
(defn rswap!
|
||||||
"Swaps the value of a to be (apply f current-value-of-atom args).
|
"Swaps the value of a to be `(apply f current-value-of-atom args)`.
|
||||||
|
|
||||||
rswap! works like swap!, except that recursive calls to rswap! on
|
rswap! works like swap!, except that recursive calls to rswap! on
|
||||||
the same atom are allowed – and it always returns nil."
|
the same atom are allowed – and it always returns nil."
|
||||||
|
|
Loading…
Reference in New Issue