kybarg / react-barcode-reader Goto Github PK
View Code? Open in Web Editor NEWReact component for reading barcode an QR codes from devices that are represented as keyboard to the system.
License: MIT License
React component for reading barcode an QR codes from devices that are represented as keyboard to the system.
License: MIT License
Is data-matrix type supported?
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)
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.
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.
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
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.
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:
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:
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.
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.
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.
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?
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`
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;
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'
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.
Your demo link don't work...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.