ROADMAP v1.0

[kybarg]

This modules popularity is growing, and while currently it satisfies need of my use case, I can see that some people struggle to integrate this into their project. So I want to define goals for V1, where everyone could be happy😊 Work can be tracked at next branch

Progress

• [x] Minimize dependencies, WebRTC-adapter is optional #34
• [x] Turn camera off when unmounting component #34
• [x] Add ability to pass plain constraints to component #34
• [x] Camera scanner as separate component #34
• [ ] Legacy image scanner as separate component
• [ ] Enable/disable processing swithch (?)
• [ ] Full mobile devices support (?)
• [ ] TypeScript typings
• [ ] Demo and documentation
• [ ] React 16 support

[Indigo744]

Hello

It would be good to add more documentation:

• why iOS should use legacymode, how to handle it with code
• CSP (Content Security Policy) header needs to allow Blob WebWorkers (worker-src blob:)
• FP (Feature Policy) header needs to allow camera (camera 'self')

Thank you.

[Indigo744]

May I suggest a few more things?

1. Add TypeScript typing
2. Add an enabled boolean option which allow to easily enable/disable image processing

I am willing to help if needed. Let me know.

[jaysella]

@kybarg Has any progress been made on adding an enabled boolean?

[alagiz]

is the project abandoned?

[pedropalhari]

As this lib is relatively simple and I like it a lot, I'll be contributing on the roadmap to the v1.0

I just ask patience because I'm relatively new on contributing to libs, so I may code the features on a non-orderly manner

[pedropalhari]

Just quick ping on @kybarg, is it okay if I use this repo as an issue/feature tracker? If so, could you enable labels to the issues?

[rdelrioge]

Hi @pedropalhari I was looking your updates on your new repo, I was wondering, could you update the legacy-mode example with hooks too please? I'm kind of lost with this library.

[pedropalhari]

Hi @pedropalhari I was looking your updates on your new repo, I was wondering, could you update the legacy-mode example with hooks too please? I'm kind of lost with this library.

Hi @rdelrioge! I updated the hooks but it wasn't accepted, you can check it out on this commit from this pull request! https://github.com/kybarg/react-qr-scanner/pull/31/commits/8944be9ee2ebd4970043ca69c8355b600635b6c1

I think it's not up to the requirements of the repo owner yet, but I haven't received feedback so feel free to use it as is for now.

[kybarg]

@pedropalhari @rdelrioge Sorry, don't have much time lately. Started refactoring on next branch . So please check it out. Leagacy mode is still in development. I see it as separate component, and then have component which will include normal and legacy mode. In that case both gonna be standalone components which is good for customization for the needs of your projects.

[pedropalhari]

@kybarg wonderful! This repo is a service to the community, no need to apologize. If you need something you can ping me up anytime.

[rdelrioge]

Hi @pedropalhari @kybarg I think I made it work with hooks with this code

import React, { useState, useRef } from "react"
import QrReader from "react-qr-reader"

function Reader() {

const reader = useRef(null);
const [code, setCode] = useState("");

const handleScan = (data) => {
    setCode(data);
};

const handleError = (err) => {
    console.error(err);
};

const openImageDialog = () => {
    reader.current.openImageDialog();
};

return (
    <div>
        <QrReader
            ref={reader}
            onError={handleError}
            onScan={handleScan}
            legacyMode
        />
        <button onClick={openImageDialog}>Sumbit a QR Code</button>
        <p>{code}</p>
    </div>
);
}

export default Reader;

[FedeBev]

Do you plan a typescript migration for typing support? Or just a .d.ts file? I could deal with a typescript migration.