react-girocode
Version:
A react component for displaying an EPC-QR-Code
78 lines (55 loc) • 1.93 kB
Markdown
# react-girocode
[](https://www.npmjs.org/package/react-girocode)
A react component for displaying GiroCodes ([EPC QR code](https://en.wikipedia.org/wiki/EPC_QR_code)).
## Usage
### Import
```tsx
import { Girocode } from "react-girocode";
```
### Use
Minimal information:
```tsx
<Girocode recipient="John Doe" iban="DE23 3702 0500 0008 0901 00" />
```
The GiroCode of the above example looks like this:
</br>
</br>
Typical use case:
```tsx
<Girocode
recipient="John Doe"
iban="DE23 3702 0500 0008 0901 00"
amount={42}
text="This is an example"
/>
```
</br>
You can also specify a custom render function if your needs exeed the simple visualization of the qr code:
```tsx
<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.
</br>
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.