react-girocode


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

Usage

$3

``tsx
import { Girocode } from "react-girocode";
`

$3

Minimal information:

`tsx

`

The GiroCode of the above example looks like this:



!example GiroCode




Typical use case:

`tsx
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:

`tsx
recipient="John Doe"
iban="DE23 3702 0500 0008 0901 00"
render={(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:

`tsx
interface Props {
encoding?: Encoding;
bic?: string;
recipient: string; // maximum lenght of 70
iban: string;
amount?: number;
purpose?: 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.