@wypratama/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

or

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;

License

MIT

Dependencies

• React
• jsQR