re-grommet

re-grommet adapts the excellent grommet UI library for simplified use with reagent. The approach is shamelessly copied from soda-ash which performs the same service for the also excellent semantic-ui-react

This version of re-grommet is built using Grommet 1.3.4

Usage

• Include the regrommet dependency in your project file

• Include grommet CSS in your application's HTML (prebuilt themes are available here )

• In your source refer to the re-grommet namespace

(ns myapp.core
  (:require [re-grommet.core :as rg]))

Examples

• Create a gromment Anchor. Note the use of the Reagent :> syntax to refer to native React objects

(defn nav-link
  [uri title page]
  (let [selected-page (rf/subscribe [:page])]
    [:> rg/Anchor {:class (when (= page @selected-page) "active")
                   :href  uri}
     title]))

• Create a simple footer.

(defn footer
  []
  [:> rg/Footer {:size "medium"}
   [:> rg/Title ]
   [:> rg/BoxRG {:direction "row"
                 :align "center"
                 :pad {:between "medium"}}
    [:> rg/Paragraph "2017 Re-Grommet"]]])

More examples on the way...

Notes

• To avoid symbol collisions, Grommet Box and List have been named BoxRG and ListRG respectively
• Grommet icons are suffixed with Icon such that the Add icon should be referenced as AddIcon in code
• This is rather alpha at this point, any comments, questions and PR's are welcme

Todo

• Support the more complex Grommet components (e.g. Chart)

License

Distributed under the Eclipse Public License either version 1.0.