Geek Answers Handbook

How to prepare the React.js component for use in ClojureScript as an external Reagent component?

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

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

This component, however, is not available in the repository:

http://cljsjs.imtqy.com/ .

If the React.js component is available in the directory, then using it with Reagent will 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 need to do with the React Spreadsheet component so that I can use it in the same simple way. How to prepare the React.js component for use in ClojureScript as an external Reagent component? Indicate the type of recipe description.

Note. This question How to use the ReactJS component with Clojurescipt / Reagent looks similar, but does not answer my question.

+5
source share
2 answers

It comes down to how you want to make JavaScript interaction ... you have 3 options:

  • Include js from your HTML file
  • Create it as part of your compilation
  • Include it as a library

I urge you to try (3); it's not complicated, just follow the instructions on CLJSJS https://github.com/cljsjs/packages/wiki/Creating-Packages

+3
source

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

Doing this 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 submissions

 (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 that this component binds a lot of dependencies (jQuery). You might be better off making such a component yourself in clojurescript / reagent.

0
source

More articles:


All Articles