Thin ClojureScript wrapper around Ant Design React components with Reagent

License: EPL-2.0

Language: Clojure

Keywords: ant-design, antd, antd-react-components, clojurescript, clojurescript-library, clojurescript-wrapper, reagent, reagent-components


Clojars Project Dependencies Status Build Status Clojars GitHub last commit

One question, is it too late to change the name?

-Scott Lang


Thin ClojureScript wrapper for Ant Design React components with Reagent

Quick link to Ant Design introduction: https://ant.design/docs/react/introduce


Usage with Yarn + Webpack + DoubleBundle

TODO: Showcase how to package dependencies using Yarn + Webpack + DoubleBundle

Reference: https://github.com/pesterhazy/cljs-spa-example

Usage with packaged CLJSJS version of Ant Design

Include Ant-Man and Reagent in your project.clj

[com.hypaer/ant-man "1.7.6"]
[reagent "0.8.1"] ;; Ant-Man requires Reagent 0.8.0+

Include Ant Design CSS and JavaScript CDNs


Require and use in your project

(require '[ant-man.core :as ant-man])

;; Input field
[ant-man/input {:value @your-reagent-atom
                :id "your-id"
                :placeholder "your-placeholder"}]

;; Select input field
(def t (reagent.core/atom nil)
(def col [{:id 1 :label "uno"}
          {:id 2 :label "dos"}]

[ant-man/select {:on-change (fn [val] (reset! t val))
                 :value @t}
  (for [{:keys [label id]} col]
    [ant-man/select-option {:value id} label])]

Helper functions

Keyify-ing lists

Given a function and collection will add unique :key value to metadata information

A customizable :key-fn functionality for specifying list item :key value

Use example:

(require '[ant-man.core :as ant-man]
         '[ant-man.helpers :as ant-man-helpers]
         '[reagent.core :as r])

(def selection (r/atom nil))
(def example-collection [{:label "foo" :id 1} {:label "bar" :id 2}])

;; Default
[ant-man/select {:on-change (fn [val] (reset! selection val))
                 :value @selection}
    (fn [{:keys [label id]}]
      [ant-man/select-option {:value id} label])

;; Custom `:key-fn`
[ant-man/select {:on-change (fn [val] (reset! selection val))
                 :value @selection}
    (fn [{:keys [label id]}]
      [ant-man/select-option {:value id} label] :key-fn (fn [x] [(inc x)]))


To use in your project and develop this library simultaneously use Leiningen Checkouts along with specifying a src path inside your :cljsbuild configuration. If you are using Figwheel and it is configured correctly changes made in Ant-Man will auto re-load.


;; Specify path in your `project.clj`

:cljsbuild {:builds
            [{:id "dev"
              :source-paths ["src/cljs" "src/cljc" "checkouts/ant-man/src/cljs"]}]}


Copyright © 2019 HYPÆR

The use and distribution terms for this software are covered by the Eclipse Public License 2.0. By using this software in any fashion, you are agreeing to be bound by the terms of this license. You must not remove this notice, or any other, from this software.

Project Statistics

Sourcerank 5
Repository Size 912 KB
Stars 8
Forks 3
Watchers 1
Open issues 0
Dependencies 4
Contributors 3
Tags 28
Last updated
Last pushed

Top Contributors See all

Vincent Storme Joel Holdbrooks Leonid Bogdanov

Packages Referencing this Repo

Thin wrapper for Ant Design React components
Latest release 1.7.6 - Updated - 8 stars

Recent Tags See all

1.7.6 September 15, 2019
1.7.5 August 27, 2019
1.7.4 March 08, 2019
1.7.3 March 07, 2019
1.7.2 March 07, 2019
1.7.1 February 26, 2019
1.7.0 February 23, 2019
1.6.4 February 23, 2019
1.6.3 February 20, 2019
1.6.2 February 19, 2019
1.6.1 February 18, 2019
1.6.0 February 18, 2019
1.5.0 February 18, 2019
1.4.0 February 18, 2019
1.3.0 February 17, 2019

Something wrong with this page? Make a suggestion

Last synced: 2019-09-16 01:01:53 UTC

Login to resync this repository