react-girocode

A react component for displaying GiroCodes (EPC QR code).

Usage

Import

import Girocode from "react-girocode";

Use

Minimal information:

<Girocode recipient="John Doe" iban="DE23 3702 0500 0008 0901 00" />

The GiroCode of the above example looks like this:

Typical use case:

<Girocode
  recipient="John Doe"
  iban="DE23 3702 0500 0008 0901 00"
  amount={42}
  text="This is an example"
/>

You can also specify a custom render function if your needs exeed the simple visualization of the qr code:

<Girocode
  recipient="John Doe"
  iban="DE23 3702 0500 0008 0901 00"
  render={(data) => <SomeFancyQrCodeComponent value={data} />}
/>

The render function receives a parameter data which contains the string content of the GiroCode. Please notice that when displaying the GiroCode as qr code the error correction level must be medium.

All available parameters:

interface Props {
  encoding?: Encoding;
  bic?: string;
  recipient: string; // maximum lenght of 70
  iban: string;
  amount?: number;
  reason?: string; // maximum lenght of 4
  reference?: string; // maximum lenght of 25
  text?: string; // maximum lenght of 140
  information?: string; // maximum lenght of 70
  render?: (data: string) => React.ReactNode;
}

The input data gets validated by this package. So the IBAN, BIC and string inputs need to be valid. Some string parameters have a maximum lenght.

Also notice that the parameters reference and text can't be present at the same time.