Liking cljdoc? Tell your friends :D

district-ui-reagent-render

Build Status

Clojurescript re-mount module, that facilitates root reagent UI component mounting.

Installation

Add [district0x/district-ui-reagent-render "1.0.1"] into your project.clj.
Include [district.ui.reagent-render] in your CLJS file, where you use mount/start.

Usage

Warning: district0x modules are still in early stages of development, therefore API can change in the future.

district.ui.reagent-render

This namespace contains district-ui-reagent-render mount module as well as a special utility function rerender.

The district-ui-reagent-render module takes a map of opts as an argument:

  • :target The html element where the root component of you app will be injected or :id, a string with the identifier of the root component.
  • :component-var The reference (a Var) to the function which returns the root component.

The validity of the args passed to the module will be checked at runtime if you have set the clojure.spec.check-asserts system property to true.

(ns my-district
  (:require [cljs.spec.alpha :as s]
            [district.ui.other-component]
            [district.ui.reagent-render]
            [district.ui.reagent-render.events :as events]
            [mount.core :as mount]))

(def main-panel []
  [:div "HOME"])

(defn ^:export init []
  (s/check-asserts true)
  (-> (mount/with-args {:reagent-render {:id "app"
                                         :component-var #'main-panel}
                        :other-component {:fu "bar"}})
      (mount/start)))

The :target argument can be passed like this:

{:reagent-render {:target (.getElementById js/document "app")
                  :component-var #'main-panel}}

Next call the resulting JS function in your index.html file to bootstrap the application::

<!doctype html>
<html lang="en">
  <head>
    <meta charset='utf-8'>
  </head>
  <body>
    <div id="app"></div>
    <script src="js/compiled/app.js"></script>
    <script>my_district.init();</script>
  </body>
</html>

rerender

If you're using figwheel for development, ensure hot-reloading by passing this function to the figwheel config:

:figwheel {:on-jsload "district.ui.reagent-render/rerender"}

It will ensure that the root component (and all it's child ocmponents) is re-rendered when you make code changes.

district.ui.reagent-render.events

This namespace contains re-frame events provided by this module.

Note: In typical applications you won't be needing to use the provided events, it is enough to just call mount/start on the underlying mount module provided by the district.ui.reagent-render namespace. None of the events below do any sort of input checking.

::start

This is the handler for the underlying event dispatched synchronously when mount/start is invoked. It takes the same arguments as the district.ui.reagent-render mount module and dispatches a :render event.

::render

This is just a book-keeping event to make sure that effectful event handler render-fx is called only once all other synchronously dispatched events from other modules have already happened. It takes the same arguments as the district.ui.reagent-render mount module.

::render-fx

This event handler performs the actual work of rendering the root component. It takes the same arguments as the district.ui.reagent-render mount module.

district.ui.reagent-render.spec

specs provided by this module:

::opts

Spec for the options passed to the module. You can toggle whether this spec is checked at runtime, see district.ui.reagent-render.

Development

Run test suite:

# install dependencies
lein deps
# watch tests and rerun on changes
lein doo chrome tests

Install into local repo:

lein cljsbuild test
lein install

Can you improve this documentation? These fine people already did:
fbielejec & madvasEdit on GitHub

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

Keyboard shortcutsReport a problemcljdoc on GitHub
× close