/Javascript/React/Barcode scanner react js

Barcode scanner react js

function BarcodeScanner (props) {

const [barcodeInputValue, updateBarcodeInputValue] = useState('')

function barcodeAutoFocus() {
    document.getElementById("SearchbyScanning").focus()
  }

  function onChangeBarcode(event) {
    updateBarcodeInputValue(event.target.value)
  }

  function onKeyPressBarcode(event) {
    if (event.keyCode === 13) {
      updateBarcodeInputValue(event.target.value)
    }
  }

return () {
            <div>
                <input
                  autoFocus={true}
                  placeholder='Start Scanning'
                  value={barcodeInputValue}
                  onChange={onChangeBarcode}
                  id='SearchbyScanning'
                  className='SearchInput'
                  onKeyDown={onKeyPressBarcode}
                  onBlur={barcodeAutoFocus}
                />
            </div>
}

}

Source: stackoverflow.com

React barcode scanner

import React, { Component } from 'react'import BarcodeReader from 'react-barcode-reader' class Test 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>    )  }}

Source: npmjs.com

Similar codes

0 vote199 views1 answer
How to add base url as src in react native
Javascript React
0 vote199 views1 answer
How to make this transform with React-Native? https://stackoverflow.com/questions/37538303/how-to-make-this-transform-with-react-native
Javascript React
0 vote169 views1 answer
Ctx beginpath react
Javascript React
1 vote188 views1 answer
Toggle drawer react native
Javascript React
15 votes194 views2 answers
Ternary react
Javascript React
22 votes186 views3 answers
How to use if else inside jsx in react
Javascript React
0 vote193 views1 answer
React native-base DatePicker comes up Minimized on iOS Asked
Javascript React
0 vote200 views1 answer
React-native-safe-area-context
Javascript React
0 vote220 views1 answer
React password hashing
Javascript React
0 vote203 views1 answer
How to load a javascript game from react
Javascript React