This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2021-01-25
Channels
- # announcements (6)
- # babashka (53)
- # beginners (199)
- # calva (101)
- # cider (8)
- # clara (17)
- # cljs-dev (1)
- # clojure (86)
- # clojure-australia (1)
- # clojure-dev (33)
- # clojure-europe (29)
- # clojure-france (13)
- # clojure-nl (6)
- # clojure-norway (7)
- # clojure-poland (3)
- # clojure-spec (2)
- # clojure-uk (9)
- # clojurescript (18)
- # community-development (2)
- # cursive (2)
- # datomic (8)
- # duct (43)
- # emacs (9)
- # events (6)
- # figwheel-main (1)
- # fulcro (7)
- # integrant (1)
- # jobs (1)
- # jobs-rus (1)
- # lambdaisland (1)
- # malli (19)
- # nrepl (2)
- # off-topic (31)
- # pathom (35)
- # quil (1)
- # reagent (4)
- # remote-jobs (7)
- # schema (1)
- # shadow-cljs (58)
- # spacemacs (6)
- # startup-in-a-month (12)
- # tools-deps (10)
- # xtdb (40)
@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
(:require
[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 []
(rd/render
[:f> scanner]))
I am now getting this error: Wrong number of args (1) passed to reagent.dom/renderThat 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:
(ns scanner.app.core
(: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 []
(render))
Note that there is a bug in the library:
https://github.com/dashboardphilippines/react-webcam-barcode-scanner/issues/10@U0187JC6398 Thankyou so much! All working now, gonna print off these points and go over them!🙏
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): https://stackoverflow.com/questions/29059530/is-there-any-way-to-generate-the-same-uuid-from-a-string
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).
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:
<Tab.Screen
name="Feed"
component={Feed}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<Ionicons name="home" color={color} size={size} />
),
}}
/>
to
[:> (.-Screen Tab)
{:key :home
:options
{:tabBarIcon
(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