@wypratama/react-qr v1.0.0

@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

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