Clojurians Log v2
Clojure programming
Channels
Apps
reagent
A minimalistic ClojureScript interface to React.js http://reagent-project.github.io/
Neros 2020-12-27T00:02:07.436700Z
Hey people, hope Christmas went well. I am trying to get React QR Scanner to work in shadow-cljs and am having problems getting it working. I converted the following react code:
Neros 2020-12-27T00:02:13.436900Z
import React, { Component } from 'react'
import QrReader from 'react-qr-scanner'
class Example extends Component {
constructor(props){
super(props)
this.state = {
delay: 500,
result: 'No result',
}
this.handleScan = this.handleScan.bind(this)
}
handleScan(result){
if(result){
this.setState({ result })
}
}
handleError(err){
console.error(err)
}
render(){
const previewStyle = {
height: 240,
width: 320,
}
return(
<div>
<QrReader
delay={this.state.delay}
style={previewStyle}
onError={this.handleError}
onScan={this.handleScan}
/>
<p>{this.state.result}</p>
</div>
)
}
}Neros 2020-12-27T00:04:23.438500Z
I converted it from class to functional in react then converted it to cljs: (defn example [] (let [state (r/atom {}) preview-style {:height "240" :width "320"}] [:<> (fn [] [:div [:> QrReader {:name "qr-reader" :delay (:qr-reader @state) :style preview-style :on-error (fn [e] (prn "You have an Error Bitch!")) :on-scan (fn [e] (swap! state assoc :qr-reader (-> e .-target .-value)))}]])])) I had made a few variations of the above and keep running into issues, any suggestions would be most welcome
tomrbowden 2020-12-30T06:54:37.442100Z
This works:
(ns qr.app.core
(:require [reagent.core :as r]
[reagent.dom :as rdom]
["react-qr-scanner" :as QrReader]))
(defn app []
(let [state (r/atom {:delay 100
:result "No result"})
preview-style {:height 240
:width 320}
handle-error #(.error js/console %)
handle-scan (fn [data]
(swap! state assoc :result data))
_ (.dir js/console QrReader)]
(fn []
[:div
[:> QrReader/default
{:delay (:delay @state)
:style preview-style
:on-error handle-error
:on-scan handle-scan}]
[:p (:result @state)]])))
(defn render []
(rdom/render [app] (.getElementById js/document "root")))
(defn ^:export main []
(render))tomrbowden 2020-12-30T07:08:41.442300Z
Calling [:> QrReader/default ...] is a bit ugly, so you could require ["react-qr-scanner" :as QrReader :rename {default Scanner}], and then call the QR Scanner as [:> Scanner]
p-himik 2020-12-27T04:03:28.439Z
Try removing the fragment and the lambda - return just the div Hiccup.
Also log the value of QrReader to make sure that you've required it correctly.
Neros 2020-12-27T05:29:07.439200Z
thanks I will check now
2020-12-27T21:29:02.440400Z
Someone implemented the components as keywords approach: https://github.com/pink-gorilla/pinkie