Skip to content

Latest commit

 

History

History
65 lines (45 loc) · 1.93 KB

README.md

File metadata and controls

65 lines (45 loc) · 1.93 KB
Raw

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

Clojars Project

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.