reacl.dom

Liking cljdoc? Tell your friends :D

Mostly cljs.
Exceptions indicated.

clj

Supporting macros for Reacl's DOM library .

Supporting macros for Reacl's DOM library   .

cljs

Convenience API for constructing virtual DOM.

This has ClojureScript wrappers for the various HTML elements.

These all expect attributes as a ClojureScript map.

Moreover, sub-element sequences need to be ClojureScript sequences of objects constructed using `keyed-dom'.

Moreover, the `letdom' form constructing virtual DOM elements for easy reference in an event handler.

Convenience API for constructing virtual DOM.

This has ClojureScript wrappers for the various HTML elements.

These all expect attributes as a ClojureScript map.

Moreover, sub-element sequences need to be ClojureScript sequences of
objects constructed using `keyed-dom'.

Moreover, the `letdom' form constructing virtual DOM elements for
easy reference in an event handler.

raw docstring

camelize^cljs

(camelize s)

Camelcases a hyphenated string, for example:

(camelize "background-color") < "backgroundColor"

Camelcases a hyphenated string, for example:
> (camelize "background-color")
< "backgroundColor"

source raw docstring

camelize-style-name^cljs

(camelize-style-name s)

Camelcases a hyphenated CSS property name, for example:

(camelize-style-name "background-color") < "backgroundColor" (camelize-style-name "-moz-transition") < "MozTransition" (camelize-style-name "-ms-transition") < "msTransition"

As Andi Smith suggests (http://www.andismith.com/blog/2012/02/modernizr-prefixed/), an -ms prefix is converted to lowercase ms.

Camelcases a hyphenated CSS property name, for example:
> (camelize-style-name "background-color")
< "backgroundColor"
> (camelize-style-name "-moz-transition")
< "MozTransition"
> (camelize-style-name "-ms-transition")
< "msTransition"

As Andi Smith suggests
(http://www.andismith.com/blog/2012/02/modernizr-prefixed/), an `-ms` prefix
is converted to lowercase `ms`.

source raw docstring

canvas^cljs

source

caption^cljs

source

circle^cljs

source

cite^cljs

source

code^cljs

source

col^cljs

source

colgroup^cljs

source

data^cljs

source

datalist^cljs

source

dd^cljs

source

del^cljs

source

details^cljs

source

dfn^cljs

source

div^cljs

source

dl^cljs

source

dom-node^cljs

(dom-node this binding)

Get the real DOM node associated with a binding.

Needs the component object.

Get the real DOM node associated with a binding.

Needs the component object.

source raw docstring

dt^cljs

source

ellipse^cljs

source

em^cljs

source

embed^cljs

source

fieldset^cljs

source

figcaption^cljs

source

figure^cljs

source

footer^cljs

source

form^cljs

source

h1^cljs

source

h2^cljs

source

h3^cljs

source

h4^cljs

source

h5^cljs

source

h6^cljs

source

HasDom^cljsprotocol

General protocol for objects that contain or map to a virtual DOM object.

This is needed for letdom, which wraps the DOM nodes on its right-hand sides.

General protocol for objects that contain or map to a virtual DOM object.

This is needed for [[letdom]], which wraps the DOM nodes on its
right-hand sides.

-get-dom^cljs

(-get-dom thing)

source raw docstring

head^cljs

source

header^cljs

source

hr^cljs

source

html^cljs

source

i^cljs

source

iframe^cljs

source

img^cljs

source

input^cljs

source

ins^cljs

source

kbd^cljs

source

keyed^cljs

(keyed key dom)

Associate a key with a virtual DOM node.

Associate a key with a virtual DOM node.

source raw docstring

keygen^cljs

source

label^cljs

source

legend^cljs

source

letdom^clj/smacro

(letdom clauses body0 & bodies)

Bind DOM nodes to names for use in event handlers.

This should be used together with reacl.core/class or reacl.core/defclass.

Its syntax is like let, but all right-hand sides must evaluate to virtual DOM nodes - typically input elements.

The objects can be used with the dom-node function, which returns the corresponding real DOM node.

Example:

(reacl.core/defclass search-bar
  app-state [filter-text in-stock-only on-user-input]
  render
  (fn [& {:keys [dom-node]}]
    (dom/letdom
     [textbox (dom/input
               {:type "text"
                :placeholder "Search..."
                :value filter-text
                :onChange (fn [e]
                            (on-user-input
                             (.-value (dom-node textbox))
                             (.-checked (dom-node checkbox))))})
      checkbox (dom/input
                {:type "checkbox"
                 :value in-stock-only
                 :onChange (fn [e]
                             (on-user-input
                              (.-value (dom-node textbox))
                              (.-checked (dom-node checkbox))))})]
     (dom/form
      textbox
      (dom/p
       checkbox
       "Only show products in stock")))))

Note that the resulting DOM-node objects need to be used together with the other DOM wrappers in reacl.dom.

Bind DOM nodes to names for use in event handlers.

This should be used together with [[reacl.core/class]] or [[reacl.core/defclass]].

Its syntax is like `let`, but all right-hand sides must evaluate to
virtual DOM nodes - typically input elements.

The objects can be used with the [[dom-node]] function,
which returns the corresponding real DOM node.

Example:

    (reacl.core/defclass search-bar
      app-state [filter-text in-stock-only on-user-input]
      render
      (fn [& {:keys [dom-node]}]
        (dom/letdom
         [textbox (dom/input
                   {:type "text"
                    :placeholder "Search..."
                    :value filter-text
                    :onChange (fn [e]
                                (on-user-input
                                 (.-value (dom-node textbox))
                                 (.-checked (dom-node checkbox))))})
          checkbox (dom/input
                    {:type "checkbox"
                     :value in-stock-only
                     :onChange (fn [e]
                                 (on-user-input
                                  (.-value (dom-node textbox))
                                  (.-checked (dom-node checkbox))))})]
         (dom/form
          textbox
          (dom/p
           checkbox
           "Only show products in stock")))))

Note that the resulting DOM-node objects need to be used together
with the other DOM wrappers in `reacl.dom`.

source raw docstring

li^cljs

source

line^cljs

source

link^cljs

source

main^cljs

source

make-dom-binding^cljs

(make-dom-binding n literally?)

Make an empty DOM binding from a ref name.

If literally? is not true, gensym the name.

Make an empty DOM binding from a ref name.

If `literally?` is not true, gensym the name.

source raw docstring

map^cljs

source

mark^cljs

source

menu^cljs

source

menuitem^cljs

source

meta^cljs

source

meter^cljs

source

nav^cljs

source

noscript^cljs

source

object^cljs

source

ol^cljs

source

optgroup^cljs

source

option^cljs

source

output^cljs

source

p^cljs

source

param^cljs

source

path^cljs

source

polygon^cljs

source

polyline^cljs

source

pre^cljs

source

progress^cljs

source

q^cljs

source

reacl->react-attribute-names^cljs

source

reacl->react-style-name^cljs

(reacl->react-style-name reacl-name)

Convert Reacl style name (keyword) to React name (string).

Convert Reacl style name (keyword) to React name (string).

source raw docstring

reacl->style-names^cljs

Cache for style names encountered.

Cache for style names encountered.

source raw docstring

rect^cljs

source

rp^cljs

source

rt^cljs

source

ruby^cljs

source

s^cljs

source

samp^cljs

source

script^cljs

source

section^cljs

source

select^cljs

source

small^cljs

source

source^cljs

source

span^cljs

source

strong^cljs

source

style^cljs

source

sub^cljs

source

summary^cljs

source

sup^cljs

source

svg^cljs

source

table^cljs

source

tbody^cljs

source

td^cljs

source

text^cljs

source

textarea^cljs

source

tfoot^cljs

source

th^cljs

source

thead^cljs

source

time^cljs

source

title^cljs

source

tr^cljs

source

track^cljs

source

u^cljs

source

ul^cljs

source

var^cljs

source

video^cljs

source

wbr^cljs

source

cljdoc is a website building & hosting documentation for Clojure/Script libraries

Keyboard shortcuts Report a problem cljdoc on GitHub

× close

reacl.dom

acljs

abbrcljs

addresscljs

areacljs

articlecljs

asidecljs

audiocljs

bcljs

basecljs

bdicljs

bdocljs

bigcljs

blockquotecljs

bodycljs

brcljs

buttoncljs

camelizecljs

camelize-style-namecljs

canvascljs

captioncljs

circlecljs

citecljs

codecljs

colcljs

colgroupcljs

datacljs

datalistcljs

ddcljs

delcljs

detailscljs

dfncljs

divcljs

dlcljs

dom-nodecljs

dtcljs

ellipsecljs

emcljs

embedcljs

fieldsetcljs

figcaptioncljs

figurecljs

footercljs

formcljs

h1cljs

h2cljs

h3cljs

h4cljs

h5cljs

h6cljs

HasDomcljsprotocol

-get-domcljs

headcljs

headercljs

hrcljs

htmlcljs

icljs

iframecljs

imgcljs

inputcljs

inscljs

kbdcljs

keyedcljs

keygencljs

labelcljs

legendcljs

letdomclj/smacro

licljs

linecljs

linkcljs

maincljs

make-dom-bindingcljs

mapcljs

markcljs

menucljs

menuitemcljs

metacljs

metercljs

navcljs

noscriptcljs

a^cljs

abbr^cljs

address^cljs

area^cljs

article^cljs

aside^cljs

audio^cljs

b^cljs

base^cljs

bdi^cljs

bdo^cljs

big^cljs

blockquote^cljs

body^cljs

br^cljs

button^cljs

camelize^cljs

camelize-style-name^cljs

canvas^cljs

caption^cljs

circle^cljs

cite^cljs

code^cljs

col^cljs

colgroup^cljs

data^cljs

datalist^cljs

dd^cljs

del^cljs

details^cljs

dfn^cljs

div^cljs

dl^cljs

dom-node^cljs

dt^cljs

ellipse^cljs

em^cljs

embed^cljs

fieldset^cljs

figcaption^cljs

figure^cljs

footer^cljs

form^cljs

h1^cljs

h2^cljs

h3^cljs

h4^cljs

h5^cljs

h6^cljs

HasDom^cljsprotocol

-get-dom^cljs

head^cljs

header^cljs

hr^cljs

html^cljs

i^cljs

iframe^cljs

img^cljs

input^cljs

ins^cljs

kbd^cljs

keyed^cljs

keygen^cljs

label^cljs

legend^cljs

letdom^clj/smacro

li^cljs

line^cljs

link^cljs

main^cljs

make-dom-binding^cljs

map^cljs

mark^cljs

menu^cljs

menuitem^cljs

meta^cljs

meter^cljs

nav^cljs

noscript^cljs

object^cljs