Package Exports

react-girocode
react-girocode/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-girocode) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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:

example GiroCode

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;
  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.