React QR

@wypratama/react-qr is a React component library for scanning QR codes using the device's camera. This library leverages the jsQR library to decode QR codes and provides an easy-to-use React component for embedding a QR code reader into your application.

Installation

npm install @wypratama/react-qr

yarn add @wypratama/react-qr

Usage

Import the QRReader component from the library and it's style, and use it in your React component:

import React from 'react';
import QRReader from '@wypratama/react-qr';
import '@wypratama/react-qr/dist/style.css';

const App = () => {
  const handleResult = (result) => {
    console.log('QR code data:', result);
  };

  return (
    <div>
      <h1>Scan a QR code</h1>
      <QRReader onResult={handleResult} />
    </div>
  );
};

export default App;

Props

Prop	Type	Description	Default
onResult	(result: string) => void	Callback function that will be called with the decoded data when a QR code is scanned.	Required
scanDelay	number	Delay (in ms) between each scan attempt. A value of 0 will scan as fast as possible.	0
width	string	Width of the QR reader component. Use any valid CSS value (e.g., '100%', '400px').	'100%'
style	React.CSSProperties	Optional custom styles to apply to the QR reader component.	{}
children	ReactNode	Optional children to render inside the QR reader component.	-
useFrame	boolean	If set to `true`, the QR reader will render children inside a default frame. If set to `false`, it will not.	true

Customizing the QR Reader Appearance

You can pass custom children and set useFrame to false if you want to customize the appearance of the QR reader:

import React from 'react';
import QRReader from '@wypratama/react-qr';

const CustomFrame = () => (
  <div className='custom-frame'>{/* Your custom frame markup */}</div>
);

const App = () => {
  const handleResult = (result) => {
    console.log('QR code data:', result);
  };

  return (
    <div>
      <h1>Scan a QR code</h1>
      <QRReader onResult={handleResult} useFrame={false}>
        <CustomFrame />
      </QRReader>
    </div>
  );
};

export default App;

Contributing

Contributions are welcome! If you find a bug or have a feature request, please open an issue on GitHub. If you'd like to contribute code, please fork the repository and make a pull request.