How to prepare a React.js component for usage in ClojureScript as an external Reagent component?

Question

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.

Timothy Pratley · Accepted Answer · 2016-05-02 17:15:48Z

3

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

Include the js from your HTML file
Build it as part of your compilation
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

answered May 2, 2016 at 17:15

Timothy Pratley

10.7k4 gold badges36 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nilo de roock Over a year ago

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.

Timothy Pratley Over a year ago

For step 4 you can use a generator like dotnetwise.com/Code/Externs/index.html so you don't need to do externs by hand.

nilo de roock Over a year ago

Now that really helps!

skrat · Accepted Answer · 2016-05-02 19:56:14Z

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.

edited May 2, 2016 at 19:56

answered May 2, 2016 at 19:46

skrat

5,5593 gold badges35 silver badges49 bronze badges

1 Comment

nilo de roock Over a year ago

It comes to down to making an :externs file right? The point is that I haven't got a clue how to create such a file.

Collectives™ on Stack Overflow

How to prepare a React.js component for usage in ClojureScript as an external Reagent component?

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related