clojurescript react-day-picker clojurescript-javascript-interop

Clojurescript date timepicker with cljsjs/react-day-picker

I am new to clojure and clojurescript. I just to know how I can implement this library in clojurescript.

This is the link to the library: https://react-day-picker.js.org/examples/basic

I have required the library in my name space like so :

(ns woot (:require [cljsjs.react-day-picker]))

But I do not know how to proceed from here

And when I try

(js/react-day-picker)

I get this error

#object[ReferenceError ReferenceError: react_day_picker is not defined]
 (<NO_SOURCE_FILE>)

Solution

CLJSJS works by providing an externs file which is used so that the ClojureScript compiler avoids messing up the names when performing optimizations. If you look at the end of the file react-day-picker.ext.js in Github, you'll notice that it exports the name DayPicker in the global scope, so you probably want to do something like (js/DayPicker.) to create a new instance of DayPicker.

That being said, I'd recommend you looking into Shadow-CLJS because the integration with the NPM ecosystem will be much more familiar. I have this repo with a small demo of react-intl and it should be easy to replace a few bits and have the basic react-day-picker example working.

Edit: I gave it a try:

Clone my cljs-react-intl repo
Install react-day-picker with npm: yarn install react-day-picker
Edit the file assets/index.html to include the required stylesheet:

   <head>
     <title>minimal react-intl example</title>
     <meta charset="UTF-8">
     <!- ADD THE FOLLOWING -->
     <link rel="stylesheet" type="text/css" href="https://unpkg.com/react-day-picker@7.4.0/lib/style.css">
   </head>

Update the main.cljs file to call the day-picker classes:

(ns app.main
  (:require ["react-day-picker" :as dp]
            [reagent.core :as r]))

;; App

(defn example-app []
  [:p
   [:div "Here is a day picker:"]
   [:> dp/DayPicker]
   ])

;; App initialization

(defn mount-root []
  (r/render [example-app] (.getElementById js/document "app")))

(defn main! []
  (mount-root)
  (println "[core]: loading"))

(defn reload! []
  (mount-root)
  (println "[core] reloaded"))

Start the app in Dev mode:

yarn run html
yarn shadow-cljs watch app

Screenshot: