API Documentation

Wiki ▸ API Documentation

---

• Component Creation - component creation
• Lifecycle Props - component lifecycle properties
• Lifecycle Functions - component lifecycle functions

---

• Getters - retrieving data from a component
• Modifiers - updating a components local state
• Displaying - displaying a component on the page
• Utils - component utility functions

Component Creation

-> (show/defclass [name lifecycle-methods])

Macro to create a new react component class. Has a similar structure as Clojure's deftype. Here is the most basic example:

(show/defclass MyClass [component]
  (render [props state] (dom/p "Basic")))

show attempts to stay as close as it can to the React component specification. render is the only required method.

Lifecycle Props

-> (mixins)

The mixins property allows the ability to mix in component lifecycle methods to be executed along with local lifecycle methods. mixins works similarly to React's mixins. The only real differences are that it only accepts a class created via defclass. Example:

(show/defclass MyMixin [component]
  (initial-state []
    {:useless-variable 12}))

(show/defclass Widget [component]
  (mixins [MyMixin])
  (render [props {:keys [useless-variable]}]
    (dom/p useless-variable)))

Except for render all lifecycle functions can be mixed in. Both initial-state and default-props are merged into the local methods (if defined).

Lifecycle Functions

These functions can only be declared within a defclass function body and mirror the same functionality as react's api. If you are wondering how/when to use each one, then I recommend you read the react docs.

The names have been changed just for the purpose of streamlining.

-> (render [props state])
-> (initial-state [])
-> (default-props [])
-> (will-mount [])
-> (did-mount [])
-> (will-receive-props [next-props])
-> (should-update [next-props next-state])
-> (will-update [next-props next-state])
-> (did-update [prev-props prev-state])
-> (will-unmount [])

---

Getters

-> (show/get-node [component])

Returns the DOM node for the component

-> (show/get-props [component ks])

Returns the value of the components inherited nested associative structure. ks is an optional property that gives quick access to a get-in call

-> (show/get-state [component ks])

Returns the value of the components owned state nested associative structure. ks is an optional property that gives quick access to a get-in call

Modifiers

Since show restricts a child's access to props, all modifiers default to updating the component's local state.

-> (show/reset! [component val cb])

Sets the new value of the components state to val without regard to the current value. Takes optional callback function to be called when value is merged into the render state"

-> (show/assoc! [component ks val cb])

Replaces a value in the component's local nested associative state, where ks is a sequence of keys and val is the new value. If any levels do not exist, hash-maps will be created. Takes optional callback function to be called when the value is merged into the render state

-> (show/update! [component ks f & args])

'Updates' a value in the component's local nested associative structure, where ks is a sequence of keys and f is a function that will take the old value and any supplied args and return the new value, and returns a new nested structure. If any levels do not exist, hash-maps will be created."

-> (show/force-update! [component])

Forces an update. This should only be invoked when it is known with certainty that we are not in a DOM transaction.

You may want to call this when you know that some deeper aspect of the component's state has changed but any state change functions were not called.

This will not invoke should-update, but it will invoke will-update and did-update."

Displaying

-> (show/render-component [component ele])

Bootstrap the component and inject it into the dom. Show expects an instantiated component, not what is created with defclass:

(show/render-component
  (MyComponent {:some-data []})
  (.getElementById js/document "app"))

Utils

-> (show/class-map [map])

Simple helper function for quickly adding/removing classNames to components. It is analgous to React's classSet helper. The map argument should be a map containing a key for the className and an expression that evaluates truthy or falsey. If the expression returns truthy then the class is added. If it returns falsey, it is not added. Here is a simple example:

(render [props state]
  (let [classes (show/class-map 
                  {"message" true
                   "message-important" (:is-important props)
                   "message-read" (:is-read props)})]
    (dom/div {:className classes}) "A message"))

-> (show/css-transition-group [name body])

Create DOM entrance and exit animations, body should be a sequence of components. Example:

(render [{:keys [items]} state]
  (dom/ul {:className "list"}
    (show/css-transition-group "list-item"
      (map #(Item {:key       (:id %)
                   :item-text (:item-text %)})
           items))))

This is a repurposing of React's ReactCSSTransitionGroup. Please read the React docs to get a understanding of what CSS rules are applied to DOM elements.

Note: Ensure that you have a unique :key property set on each component/dom-element that you pass as a body.