Help wrapping react component: react-qr-scanner

[mrtineu]

Hi. im trying to make a simple webpage that will read qr code of product and check the database for additional info about the product and sends its back. I want to add a qr code reader trough react component. I have zero experience with react and almost none with javascript. The package is react-qr-scanner. If anyone can help me import the package into reflex it would be appriciated. Thank you

[averrois]

Hi there, just to u know I don't have that strong bg with using react, I am still in the process, bu I don't mind exploring and learning new things in the way of solving this situation with u....

[corv89]

This should probably be marked as a "feature request" for react-qr-scanner

By the way @mrtineu since you're still unfamiliar with some of the underlying tech, I would recommend you try ChatGPT-4 when you run into issues. It doesn't know about Reflex but it does a good job of writing python, javascript, react and solving general issues

[programmeddeath1]

I'm trying to import introjs-react as a component with react, would love to try and go through this process together if we can try and find a way to solve these step by step. The reflex team has provided a basic react component import here - https://reflex.dev/docs/advanced-guide/wrapping-react. I' trying out importing as a component similar to these steps. Seems like a good knowledge of react would be more beneficial in solving this faster.

[masenf]

I haven't forgotten about this one yet, just working on it in the background.

I found a better (easier? more compatible?) QR scanner than the one originally requested:

NOTE: this example is dependent on https://github.com/reflex-dev/reflex/pull/1548, which is currently in main, but not in released versions of reflex!

from typing import Dict, Set
import reflex as rx
from reflex.components.component import Component, NoSSRComponent
from reflex.vars import Var

class QrScanner(NoSSRComponent):
    library = "@yudiel/react-qr-scanner"
    tag = "QrScanner"

    # The delay between scans in milliseconds.
    scan_delay: rx.Var[int]

    # The id of the element to disaply the video preview
    video_id: rx.Var[str]

    hide_count: rx.Var[bool]

    container_style: rx.Var[Dict[str, str]]
    video_style: rx.Var[Dict[str, str]]

    def get_controlled_triggers(self) -> Dict[str, Var]:
        """Dict mapping (event -> expected arguments)."""
        return super().get_controlled_triggers() | {
            "on_result": rx.EVENT_ARG,
            "on_decode": rx.EVENT_ARG,
            "on_error": rx.EVENT_ARG,
        }

qr_scanner = QrScanner.create

and the app

import reflex as rx

from .yudiel_qr_scanner import qr_scanner as yudiel_qr_scanner

class State(rx.State):
    last_scan: str = ""

    def on_scan(self, result: str):
        print(f"on_scan: {result}")
        if result:
            self.last_scan = result

def yudiel_react_qr_scanner_page() -> rx.Component:
    return rx.fragment(
        rx.vstack(
            rx.heading("@yudiel/react-qr-scanner", font_size="2em"),
            rx.box(
                rx.cond(
                    State.last_scan,
                    rx.text(State.last_scan),
                    rx.text("Scan a valid QR code"),
                ),
            ),
            yudiel_qr_scanner(
                on_decode=State.on_scan,
                container_style={
                    "width": "640px",
                    "height": "480px",
                    "padding-top": "0",
                },
            ),
            spacing="1.5em",
            font_size="2em",
            padding_top="10%",
        ),
    )

app = rx.App()
app.add_page(yudiel_react_qr_scanner_page, route="/")
app.compile()

I'm planning on writing up my process for creating this as a set of blog posts and video, but I didn't want to wait until then before sharing what I have so far!

[masenf]

qr-scanner is now officially part of reflex-examples and working with our latest release, 0.2.5: https://github.com/reflex-dev/reflex-examples/tree/main/qr-scanner