Fork me on GitHub

@thheller Thanks again for the reply, I feel really useless at the moment, tried many different variations and after trying this :

(ns app.product.views.qr-scanner
   [reagent.core :as r]
   [reagent.dom :as rd]
   ["react" :as react]
   ["react-webcam-barcode-scanner" :refer [BarcodeScannerComponent]]))

;; "Not Found"

(defn scanner []
  (let [[data setData] (react/useState "Not Found")]
    [:> BarcodeScannerComponent
     {:height 500
      :width 500
      :onUpdate (fn [err result]
                  (if result
                    (setData (.-text result)) (setData "Not Found")))}
     (fn [result]
       (r/as-element [:p result]))]))

(defn qr-scanner []
   [:f> scanner]))
I am now getting this error: Wrong number of args (1) passed to reagent.dom/render


accepts two arguments.


Check out its docstring for the details.


Your outer function and inner render function should take the same number of args.


Oh unless I misread that. Hard to see the indentation on mobile


That fn is not from a form-2 component but just an argument to BarcodeScannerComponent.


And you wouldn't see that error with Reagent components anyway because there's no such check in runtime, only in compile time.


I’ve built the scanner using Shadow-CLJS. What I noticed from your code: (1) the React Webcam Barcode Scanner docs show that BarcodeScannerComponent is a default, not named, import. You are using a named import in your code. (2) You are using the React.useState hook, which is unnecessary in CLJS - just use a ratom. Here is the code in CLJS:

  (:require [reagent.core :as r]
            [reagent.dom :as rdom]
            ["react-webcam-barcode-scanner" :default BarcodeScannerComponent]))

(defn app []
  (let [data (r/atom nil)
        handle-update (fn [err result]
                        (.log js/console err)
                        (if result
                          (reset! data (.-text result))
                          (reset! data "Not Found")))]
    (fn []
       [:> BarcodeScannerComponent
        {:width 500
         :height 500
         :on-update handle-update}]
       [:p (str @data)]])))

(defn render []
  (rdom/render [app] (.getElementById js/document "root")))

(defn ^:export main []
Note that there is a bug in the library:

🙌 3
👀 3

@U0187JC6398 Thankyou so much! All working now, gonna print off these points and go over them!🙏

🙌 3
👍 3

Anyone know of an easy way to create a predictable “unique” uuid from a string? So always from the same string, the same uuid, and with highly unlikely collisions. I think this one might do the trick for Clojure (even if I’m not sure about the collisions aspect of it):


highly unlikely collisions strongly suggests to me that you want a cryptographically strong hash function in there, with enough bits of output to include all of those in a UUID (discard any extras).

❤️ 3

I’ll run with that. Actually I dodged the problem for now, but I have plans where I will need this. 😃


I’m getting the following error when converting react native code to clojurescript:

          tabBarLabel: 'Home',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="home" color={color} size={size} />
[:> (.-Screen Tab)
       {:key :home
                  (fn [opt]
                    [:> Ionicons {:name "ios-information-circle"
                                  :size (. opt -size)
                                  :color (. opt -color)}])}
        :name "Home"
        :component (fn [] (r/as-element [home-container]))}]
And the error is:
Objects are not valid as a react child
Do you know what’s causing the error?


the error is in the tabBarIcon key


but I don’t know what it is


Two things that I notice: - In JS, component set to, well, a relevant component. You set it to a function. It may or may not cause problems - depends on the implementation of Tab.Screen - tabBarIcon returns a element. But you return a Hiccup vector


What's the proper way to handle URIs between Clojure and ClojureScript when using Transit on the wire? How do I decode and encode a URI in cljs? I.e., to convert it to a string (for an input box), then back to a URI onChange.


If you need some specific class instances instead of strings, you can create your own tag and assign a reader and a writer for it on each side.