A ClojureScript library of reusable components for Reagent
A ClojureScript library of UI components for Reagent.
In short, re-com attempts to provide the kind of UI basics you'd need to build a desktop-class SPA app.
The entire layout side of this library relies on Flexbox
Now, pretty much every modern browser has support for Flexbox so this is probably a non-issue these days, unless you need to support old versions of IE.
We build desktop-class apps to run in controlled browser environments like Electron. So, we know we're dealing with Chrome.
None of the components have been designed with mobile in mind. We said we had a desktop app focus, right?
Neither have we been worried too much about code size because other design goals have taken precedence. To give you some idea, our main demo app which includes every component, plus all demo code and plenty of yadda yadda explanatory strings, comes to about 167K compressed when using
:optimizations :advanced(700K uncompressed). That number includes ReactJS plus the ClojureScript libs and runtime. So, everything. Note: these numbers no longer match the demo app. We wanted to show off some of the debug features in our demo app, so we backed away from fully advanced, minified compilation.
Start by looking at the demo.
When you are running the demo app, look to the the right of each page's titles, and you'll see hyperlinks which will take you to the associated source code. That's a convenient way to navigate to either the components themselves or the demo code.
When browsing more generally, look in the
srcdirectory or this repo, you'll notice two sub-directories:
git clone https://github.com/day8/re-com.git
This will run the demo, by doing: - a clean - a compile
[:demo] Build completed.is displayed in the console indicating the dev HTTP server is ready.
This will: - clean - compile the tests - compile in release mode as a basic optimized build check
This will only work if you have the right credentials in your env:
shell lein deploy-aws
re-com is available from clojars. Add it to your project.clj dependencies:
You should now be able to require the
re-com.corenamespace, which exposes all of the API functions documented in the
You'll then need to include these asset folders in your app: https://github.com/day8/re-com/tree/master/run/resources/public/assets
As far as your
index.htmlis concerned, take inspiration from here: https://github.com/day8/re-com/tree/master/run/resources/public
In particular, you'll need bootstrap (assumedly via a CDN):
And a reference to these two CSS files (make sure
And a reference to the Roboto fonts (but this can be overridden relatively easily):
Reagent comes bundled with a matching version of ReactJS, so you don't need to include it explicitly.
If you decide to use re-com, consider also using re-frame (an MVC-ish framework).
re-comcan be used independently of each other, they dovetail well.
Also, please refer to CONTRIBUTING.md for further details on creating issues and pull requests.
Copyright © 2015-2021 Michael Thompson
Distributed under The MIT License (MIT) - See LICENSE.txt