Fork me on GitHub

If someone is interested in how to use the Vega-Lite ( graphics library with Clojurescript I created an exercise about it:

đź‘Ť 6

I am trying to get a QR code scanner to work in my project, I have tried several different ways but I am still getting problems. The most basic QR code example in react I have found is the following: I am trying to get a QR code scanner to work in my project, I have tried several different ways but I am still getting problems. The most basic QR code example in react I have found is the following:

import React from 'react';
import BarcodeScannerComponent from "react-webcam-barcode-scanner";

function App() {

  const [ data, setData ] = React.useState('Not Found');

  return (
        onUpdate={(err, result) => {
          if (result) setData(result.text)
          else setData('Not Found')

export default App;
Any suggestions would be most grateful, thanks.


@info527: maybe the wrong channel? Otherwise, if you are doing this with reagent or somesuch in ClojureScript, then maybe post a CLJS snippet and the problems you encounter.


Thanks, yea I will post the cljs in a moment


Help! NPM integration issue (details in thread): > No such namespace: @codemirror/state


Note: done npm install and installed ok.


are you trying clojure-mode?


if you’re using bundle you’ll need the first one


try replacing your clojurescript dep with

{:git/url ""
 :sha "f48609b862062caae6d19d5d281c4f7b53a39c25"}


alternatively you can use as a skeleton which works with shadow and unpatched ClojureScript

đź‘Ť 3

thank you!


you’re welcome, let me know if it helps

đź‘Ť 3

if you have any questions about clojure-mode, feel free to post in #nextjournal


cm demo works, git/sha doesn't for some reason will continue from the demo


what’s the error?


Same No such namespace: @codemirror/state


@oliver this is how I had converted the above react code to work in shadow-cljs:

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

(defn qr-scanner []
  (let [[data setData] (.useState js/React "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]))]))
I am getting errors in the console saying, reagent.impl.component.js:219 Error rendering component (in app.product.views.qr_scanner.qr_scanner) app.product.views.qr_scanner.js:8 Uncaught ReferenceError: React is not defined


@info527 add ["react" :as react] to your ns require and use (react/useState ...) instead of js/React


thankyou, Ill try it now


@info527 It’s not necessary to use React hooks - it is simpler to use a ratom to hold the data state.


@thheller thanks for the prompt reply, I am getting the following error now in the console: Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:


yeah the useState hook you can only use in a function component. not sure how thats done in reagent. docs should have it. might be :f> or so

Piotr Brzeziński22:01:41

Hi. I’m playing with clojurescript + reagent for the first time and got a question. I want to have a timer that I can start by clicking on it and re-set on another click. I run the timer that updates my r/atom using setInerval but am not sure how/where to clear interval. I tried adding it conditionally at the end of my anonymous onclick FN but it fails saying is not a function

(defn counter-row [{desc :desc timer :timer active :active bg-color :bg-color}]
      (let [seconds-elapsed (r/atom 0)
            running (r/atom false)
            timer-fn (fn [] (js/setInterval #(swap! seconds-elapsed inc) 1000))]
           (fn []
               [:div {:class (str "h-full flex flex-col flex-1 " bg-color " bg-opacity-75 items-center justify-evenly")
                      :on-click (fn []
                                    #(reset! running (not @running))
                [:p {:class "w-full text-9xl text-center text-gray-50"} desc]
                [:p {:class "w-full text-9xl text-center text-gray-50"} @seconds-elapsed]])))
all help appreciated.

Piotr Brzeziński22:01:27

By reset I mean set seconds-elapsed to 0 and stop counting


If @running then call clearInterval, otherwise call setInterval. Save the result of setInterval in an atom (you can use a regular atom instead of a ratom here) and pass it later to clearInterval. A small thing - consider using reagent.core/with-let instead of a form-2 component. It won't change how it works but will make some things simpler. Also, it will make it much easier to call clearInterval when the component is unmounted (you cannot do it at all with form-2).

Piotr Brzeziński09:01:53

Thanks! Let me try that out.

Piotr Brzeziński10:01:25

Following your advice, I changed the code to this -> so now setInterval is assigned to timer-fn atom, but for some reason when I call js/cleaInterval timer-fn it doesn’t do anything.

Piotr Brzeziński10:01:36

The interval keeps counting :thinking_face:


It should be (js/clearInterval @timer-fn).

Piotr Brzeziński10:01:18

Ah yeah, just noticed that

Piotr Brzeziński10:01:26

Darn, I have problems remembering that.

Piotr Brzeziński10:01:31

Thanks a lot, now it works like a charm 🙂

đź‘Ť 3