CODEWITHSUNDEEP
reactjsclojurescriptreagent
nilo de roock
nilo de roock

Reputation: 4157

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

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.

Upvotes: 5

Views: 659

Answers (2)

skrat
skrat

Reputation: 5562

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.

Upvotes: 0

Timothy Pratley
Timothy Pratley

Reputation: 10662

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

Upvotes: 3

Related Questions