reagent.core — district0x.re-frame/ipfs-fx 1.0.0

adapt-react-class cljs

(adapt-react-class c)

Returns an adapter for a native React class, that may be used just like a Reagent component function or class in Hiccup forms.

after-render cljs

(after-render f)

Run f using requestAnimationFrame or equivalent.

f will be called just after any queued renders in the next animation frame (and even if no renders actually occur).

argv cljs

(argv this)

Returns the entire Hiccup form passed to the component.

as-component cljs

as-element cljs

(as-element form)

Turns a vector of Hiccup syntax into a React element. Returns form unchanged if it is not a vector.

atom cljs

(atom x)

(atom x & rest)

Like clojure.core/atom, except that it keeps track of derefs. Reagent components that derefs one of these are automatically re-rendered.

children cljs

(children this)

Returns the children passed to a component.

component-path cljs

(component-path c)

create-class cljs

(create-class spec)

Create a component, React style. Should be called with a map, looking like this:

{:get-initial-state (fn [this]) :component-will-receive-props (fn [this new-argv]) :should-component-update (fn [this old-argv new-argv]) :component-will-mount (fn [this]) :component-did-mount (fn [this]) :component-will-update (fn [this new-argv]) :component-did-update (fn [this old-argv]) :component-will-unmount (fn [this]) :reagent-render (fn [args....])} ;; or :render (fn [this])

Everything is optional, except either :reagent-render or :render.

create-element cljs

(create-element type)

(create-element type props)

(create-element type props child)

(create-element type props child & children)

Create a native React element, by calling React.createElement directly.

That means the second argument must be a javascript object (or nil), and that any Reagent hiccup forms must be processed with as-element. For example like this:

(r/create-element "div" #js{:className "foo"} "Hi " (r/as-element [:strong "world!"])

which is equivalent to

[:div.foo "Hi" [:strong "world!"]]

current-component cljs

(current-component)

Returns the current React component (a.k.a this) in a component function.

cursor cljs

(cursor src path)

Provide a cursor into a Reagent atom.

Behaves like a Reagent atom but focuses updates and derefs to the specified path within the wrapped Reagent atom. e.g., (let [c (cursor ra [:nested :content])] ... @c ;; equivalent to (get-in @ra [:nested :content]) ... (reset! c 42) ;; equivalent to (swap! ra assoc-in [:nested :content] 42) ... (swap! c inc) ;; equivalence to (swap! ra update-in [:nested :content] inc) )

The first parameter can also be a function, that should look something like this:

(defn set-get ([k] (get-in @state k)) ([k v] (swap! state assoc-in k v)))

The function will be called with one argument – the path passed to cursor – when the cursor is deref'ed, and two arguments (path and new value) when the cursor is modified.

Given that set-get function, (and that state is a Reagent atom, or another cursor) these cursors are equivalent: (cursor state [:foo]) and (cursor set-get [:foo]).

Note that a cursor is lazy: its value will not change until it is used. This may be noticed with add-watch.

dispose! cljs

(dispose! x)

Stop the result of track! from updating.

dom-node cljs

(dom-node this)

Returns the root DOM node of a mounted component.

flush cljs

(flush)

Render dirty components immediately to the DOM.

Note that this may not work in event handlers, since React.js does batching of updates there.

force-update cljs

(force-update this)

(force-update this deep)

Force a component to re-render immediately.

If the second argument is true, child components will also be re-rendered, even is their arguments have not changed.

force-update-all cljs

(force-update-all)

Force re-rendering of all mounted Reagent components. This is probably only useful in a development environment, when you want to update components in response to some dynamic changes to code.

Note that force-update-all may not update root components. This happens if a component 'foo' is mounted with (render [foo]) (since functions are passed by value, and not by reference, in ClojureScript). To get around this you'll have to introduce a layer of indirection, for example by using (render [#'foo]) instead.

is-client cljs

merge-props cljs

(merge-props defaults props)

Utility function that merges two maps, handling :class and :style specially, like React's transferPropsTo.

next-tick cljs

(next-tick f)

Run f using requestAnimationFrame or equivalent.

f will be called just before components are rendered.

partial cljs

(partial f & args)

Works just like clojure.core/partial, but the result can be compared with =

props cljs

(props this)

Returns the props passed to a component.

react cljs

reactify-component cljs

(reactify-component c)

Returns an adapter for a Reagent component, that may be used from React, for example in JSX. A single argument, props, is passed to the component, converted to a map.

render cljs

(render comp container)

(render comp container callback)

Render a Reagent component into the DOM. The first argument may be either a vector (using Reagent's Hiccup syntax), or a React element. The second argument should be a DOM node.

Optionally takes a callback that is called when the component is in place.

Returns the mounted component instance.

render-component cljs

replace-state cljs

(replace-state this new-state)

Set state of a component. Equivalent to (reset! (state-atom this) new-state)

rswap! cljs

(rswap! a f & 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 the same atom are allowed – and it always returns nil.

set-state cljs

(set-state this new-state)

Merge component state with new-state. Equivalent to (swap! (state-atom this) merge new-state)

state cljs

(state this)

Returns the state of a component, as set with replace-state or set-state. Equivalent to (deref (r/state-atom this))

state-atom cljs

(state-atom this)

Returns an atom containing a components state.

track cljs

(track f & args)

Takes a function and optional arguments, and returns a derefable containing the output of that function. If the function derefs Reagent atoms (or track, etc), the value will be updated whenever the atom changes.

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 depends on changes, and will only trigger updates of components when its result changes.

track is lazy, i.e the function is only evaluated on deref.

track! cljs

(track! f & args)

An eager version of track. The function passed is called immediately, and continues to be called when needed, until stopped with dispose!.

unmount-component-at-node cljs

(unmount-component-at-node container)

Remove a component from the given DOM node.

with-let cljs macro

(with-let bindings & body)

wrap cljs

(wrap value reset-fn & args)

Provide a combination of value and callback, that looks like an atom.

The first argument can be any value, that will be returned when the result is deref'ed.

The second argument should be a function, that is called with the optional extra arguments provided to wrap, and the new value of the resulting 'atom'.

Use for example like this:

(wrap (:foo @state) swap! state assoc :foo)

Probably useful only for passing to child components.