5

I would like to use this React.js component as a foreign Reagent component in a ClojureScript application :

https://github.com/felixrieseberg/React-Spreadsheet-Component.

This component is however not available in the repository:

http://cljsjs.github.io/.

If a React.js component is available in the directory then using it with Reagent would be as simple as in the following example.

(ns demo.views
  (:require [reagent.core :as reagent]
            [cljsjs.reactable]])

(defn example []
  [:div
  [:> Reactable.Table
    {:data (clj->js [
                 {:name "Foo" :section 51}
                 {:name "Bar" :section 51}
                 ])}
    ]
   ]
  )

I would like to know what I would have to do with the React Spreadsheet Component such that I can use it in a similar simple way. How to prepare a React.js component for usage in ClojureScript as an external Reagent component? Please provide a clear recipe type of description.

Note: This question How to use a ReactJS Component with Clojurescipt/Reagent looks similar but does not answer my question.

Community
  • 1
  • 1
nilo de roock
  • 4,077
  • 4
  • 34
  • 62

2 Answers2

3

It boils down to how you want to do JavaScript interop... you have 3 choices:

  1. Include the js from your HTML file
  2. Build it as part of your compilation
  3. Include it as a library

I encourage you to try (3); it isn't difficult, just follow the steps on CLJSJS https://github.com/cljsjs/packages/wiki/Creating-Packages

Timothy Pratley
  • 10,586
  • 3
  • 34
  • 63
  • Are you saying that with all three options I can use it as a an external Reagent component? I thought that was only possible with option 3. As for option 3, I looked at that description, of course, I find step 4 a really difficult one. – nilo de roock May 02 '16 at 19:45
  • For step 4 you can use a generator like http://www.dotnetwise.com/Code/Externs/index.html so you don't need to do externs by hand. – Timothy Pratley May 02 '16 at 21:24
  • Now that really helps! – nilo de roock May 03 '16 at 06:02
0

Use ClojureScript's compiler options to include the external JS in the build, then use reagent's adapt-react-class to use the component in your reagent views. Try not to depend on projects like CLJSJS.

Doing this yourself will keep you in control of your project.

in project.clj

:foreign-libs [{:file "https://rawgit.com/felixrieseberg/React-Spreadsheet-Component/master/dist/spreadsheet.js"
                :provides  ["no-idea"]}]

in the views

(def reactable-table (r/adapt-react-class js/Reactable.Table))

(defn example []
  [:div
  [reactable-table
    {:data (clj->js [
                 {:name "Foo" :section 51}
                 {:name "Bar" :section 51}])}]])

Note however that this component bundles lots of dependencies (jQuery). You might be better of by making a component like this yourself, in clojurescript/reagent.

skrat
  • 5,518
  • 3
  • 32
  • 48