kybarg / react-barcode-reader Goto Github PK

Hi, i have 2 barcode reader, one of them scan the barcode and send the input as a string into the react app, but the other scan the barcode and send the input as a single key event. How should i handle this? i notice this library has onScan and onReceive props, with onReceive i can get the key event, but i'm still confused on how to detect the barcode mode. because sometimes both onScan and onReceive run at the same scan. Is there any workaround for this?

I'm having problem showing the camera with the example code, does it need something else, bellow the code. also the demo is no working...

import React, {Component} from 'react'
import BarcodeReader from 'react-barcode-reader'

class Barcode extends Component {
  constructor(props) {
    super(props);
    this.state = {
      result: 'No result',
    };
    this.handleScan = this.handleScan.bind(this);
  }

  handleScan(data) {
    this.setState({
      result: data,
    })
  }

  handleError(err) {
    console.error(err)
  }

  render() {
    return (
      <div>
        <BarcodeReader
          onError={this.handleError}
          onScan={this.handleScan}
        />
        <p>{this.state.result}</p>
      </div>
    )
  }
}

export default Barcode;

Hello,

There is an issue with babel

I already did indicated steps in this error message but it's still not working.

I even added .env file and in the project i have this error:

Thanks for help !

I want to prevent the onScan method call of any kind of keypress event from keyboard because it is altering my barcode scan input data.

I tried "preventDefault" prop but did not get any success, please suggest me something on it.

Hello, I would like the component to always be active, for example, it works if I am not in an input, but if I am active in a form, does it stop working, any suggestions?

(..me tarzan)

The component is not rendering anything. No errors in console either.

Also, Storybook is blank.

edit: This doesn't seem to even try to open the camera. No permissions get asked.

module declaration for react-barcode-reader is missing. To be able to use in TYPESCRIPT

Hi,

tl;dr can you pls move babel-loader from dependency to devDependency? Thank you!

When Im trying to run my project with you library and react-scripts 3.4.0 (we dont use 3.4.1 because there is a bug not fixed for test coverage), we are getting this error:

`To fix the dependency tree, try following the steps below in the exact order:

1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
   This may help because npm has known issues with package hoisting which may get resolved in future versions.

6. Check if /home/mkubacki/workspace/team-cat/backstage/packages/app/node_modules/babel-loader is outside your project directory.
   For example, you might have accidentally installed something in your home folder.

7. Try running npm ls babel-loader in your project folder.
   This will tell you which other package (apart from the expected react-scripts) installed babel-loader.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
`

I tried this steps but didnt work. If we move babel to devdependency, it will work as far as I know. I would love to get your support.

When I am deploying the app on heroku and Calling my React Client URL this show a Security Error:
Blocked a frame with origin "https://2f5bd16b.ngrok.io" from accessing a cross-origin frame.

This Error Occurs in SHOPIFY

`←→1 of 2 errors on the page
SecurityError: Blocked a frame with origin "https://662bdced.ngrok.io" from accessing a cross-origin frame.
▶ 18 stack frames were collapsed.
Module../src/index.js
src/index.js:7
4 | import App from './App';
5 | import * as serviceWorker from './serviceWorker';
6 |

7 | ReactDOM.render(, document.getElementById('root'));
8 |
9 | // If you want your app to work offline and load faster, you can change
10 | // unregister() to register() below. Note this comes with some pitfalls.
View compiled
webpack_require
/home/osama/Documents/dev/scanandship/scan-and-ship/webpack/bootstrap:785
782 | };
783 |
784 | // Execute the module function
785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 786 |
787 | // Flag the module as loaded
788 | module.l = true;
View compiled
fn
/home/osama/Documents/dev/scanandship/scan-and-ship/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
150 | return webpack_require(request);
| ^ 151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
0
https://662bdced.ngrok.io/static/js/main.chunk.js:2545:18
webpack_require
/home/osama/Documents/dev/scanandship/scan-and-ship/webpack/bootstrap:785
782 | };
783 |
784 | // Execute the module function
785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 786 |
787 | // Flag the module as loaded
788 | module.l = true;
View compiled
checkDeferredModules
/home/osama/Documents/dev/scanandship/scan-and-ship/webpack/bootstrap:45
42 | }
43 | if(fulfilled) {
44 | deferredModules.splice(i--, 1);
45 | result = webpack_require(webpack_require.s = deferredModule[0]);
| ^ 46 | }
47 | }
48 |
View compiled
Array.webpackJsonpCallback [as push]
/home/osama/Documents/dev/scanandship/scan-and-ship/webpack/bootstrap:32
29 | deferredModules.push.apply(deferredModules, executeModules || []);
30 |
31 | // run deferred modules when all chunks ready
32 | return checkDeferredModules();
| ^ 33 | };
34 | function checkDeferredModules() {
35 | var result;
View compiled
(anonymous function)
https://662bdced.ngrok.io/static/js/main.chunk.js:1:79`

It feels like the radio button is acting as an input for the scanned value so rather than running the scan function I have tied to the BarcodeReader component it just gets stored on the input type='radio'

Is data-matrix type supported?

https://kybarg.github.io/react-barcode-reader/?path=/story/barcode-scanner--default
Demo web site not working
https://codesandbox.io/s/scanner-demo-xp0ni?file=/src/App.js

i tried it this library to scan barcode from camera , but it seems not working, not sure does it work with camera or not with mobile phone or it needs external reader/scanner device to provide data. please help to answer does this library work with mobile phone camera as barcode read or not

Your demo link don't work...

Hi. can you tell me what model would behave as a keyboard for this lib to work with the reader? I can't find any info on that.

Hello,

I can not use your package with Vite.js since it expects package.json's "module" field to be a path to an es module.

It should be "type": "commonjs" instead I think.

[vite] Pre-transform error: Failed to resolve entry for package "react-barcode-reader". The package may have incorrect main/module/exports specified in its package.json.

This link could be usefull.