re-frame 2020-07-25 | Slack Archive

Rabie02:07:39

Hello, Is there a way to dispatch reframe events from Javascript functions in the webpage? I would like to migrate to reframe an app I made that uses google maps. When you click on a markup in gmaps a javascript event function handler is called. I would like to know if there is a way to dispatch a reframe event from theses javascript functions. Thank you

David Pham04:07:25

You could write the handler in ClojureScript and export it.

👍 3

p-himik05:07:52

Wrap re-frame.core/dispatch in a function marked with ^:export.

👍 3

dpsutton05:07:48

Can you easily construct keywords from js? And vectors? Or will js arrays work?

p-himik05:07:07

That wrapper can do that. And whatever else might be needed to bridge JS and re-frame.

p-himik05:07:09

JS arrays will not work because there's an explicit check for vector?.

Rabie14:07:36

Thank you for your answer

Rabie14:07:53

A non related question. Has anyone worked with reframe and https://react-bootstrap.github.io/? I found some examples of integrating https://github.com/burhanloey/reagent-react-bootstrap/tree/master/src/reagent_react_bootstrap. But I was wondering, given that reframe comes with its own react (from my understanding), if it was possible to tell reframe to use react-bootsrap instead of react or if that would lead to some unwanted conflicts? Thank you

p-himik14:07:35

re-frame doesn't come with its own React. re-frame uses Reagent, which requires React.

p-himik14:07:48

And react-bootstrap is just a library built on top of React. If you decide to use it, it will just use React that's already used in your project.

Rabie14:07:10

Ah ok. Thanks for clarifying @U2FRKM4TW

rberger01:07:46

Its pretty easy to use react-bootstrap especialy if you use shadow-cljs to load the react and react-bootstrap npm libraries via the package.json. Something along the lines of:

(ns myapp.react-bootstrap
  (:require
   [reagent.core :as r]
   ["react-bootstrap" :as rs]))

(defn adapt [component]
  (try
    (r/adapt-react-class component)
    (catch js/Object e
      (prn e.message))))

(def accordion        (u/adapt rs/Accordion))
(def accordion-toggle (u/adapt rs/Accordion.Toggle))
(def accordion-collapse (u/adapt rs/Accordion.Collapse))
(def alert (u/adapt rs/Alert))
...  Continue with all the react-bootstrap components you want to use

Then use them in your app
(ns myapp.view
  (:require
   [reagent.core :as r]
   [myapp.react-bootstrap :as rb]))

(defn some-alert []
  [rb/alert {:variant "warning"} "It's a trap!"])

You can also use the react-bootstrap compoents inline with the :> similar to how they used react-markdown in https://github.com/reagent-project/reagent/blob/master/examples/react-mde/src/example/core.cljs

2020-07-25

Channels