A data-driven, reagent-wrapper for RoughJS
This library provides a simple reagent component for RoughJS which is a fun library to create diagrams that look hand-drawn.
See examples below.
Get it from Clojars: [monoid/rough-cljs "1.0"]
If you are using Shadow-CLJS, it will download the JavaScript dependency automatically.
Otherwise, add RoughJS via NPM:
$ npm install -D roughjs
You will also need reagent 0.10.0 in your project.
To use it, require it and add it to your hiccup:
(require '[rough-cljs.core :refer [Rough]])
(defn MyComponent []
[:div [Rough {:svg {:width 200 :height 200}} [[:rectangle [10 10 100 100] {:fill "blue"}]]]
Note: Only changes to the drawing primitives have any effect when re-drawing this component.
All supported primitives like rectangle, circle etc. have been defined via spec. (see rough-cljs/spec)
Check the docstring of Rough for more information.
Use shadow-cljs: $ shadow-cljs watch app
You guys rock:
- Preet Shihn - Author of RoughJS
- Thomas Heller - for Shadow-CLJS. Keeps me sane!
- Reagent project - super powers for React
- And the ClojureScript team of course