A react component for displaying an EPC-QR-Code
npm install react-girocodetsx
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.