react-bank-logo

A beautiful, reusable, and optimized React component for displaying bank & e-wallet logos. Perfect for wedding invitations, donation pages, or payment gateways.

Features

• SVG First: High-quality vector logos provided by default.
• Custom Logo Support: Easily use your own logos via the src prop (supports SVG, PNG, JPG).
• Lazy Loading: Built-in lazy loading for better performance.
• TypeScript Ready: Full type safety for bank names and props.
• Customizable: Easy to style with className and style props.

Installation

npm install react-bank-logo
# or
yarn add react-bank-logo
# or
pnpm add react-bank-logo

Basic Usage

import { BankLogo } from "react-bank-logo";

function MyComponent() {
  return (
    <div>
      {/* Basic usage using bank name (renders SVG) */}
      <BankLogo name="bca" width={100} />

      {/* Using E-Wallet name */}
      <BankLogo name="gopay" width={120} />

      {/* Custom source (supports PNG/JPG) */}
      <BankLogo src="/my-custom-logo.png" />
    </div>
  );
}

API Reference

BankLogo Props

| Prop | Type | Default | Description | | :---------- | :------------------ | :--------------- | :---------------------------------------------------------- | | name | BankName | - | The key of the bank (e.g., 'bca', 'mandiri', 'gopay'). | | src | string | - | Custom image source. Overrides the name prop if provided. | | width | number | 120 | Width of the logo in pixels. | | height | number | auto | Height of the logo in pixels. | | className | string | "" | Additional CSS classes for the container/image. | | style | CSSProperties | {} | Inline styles for the image. | | alt | string | Bank Name | Alt text for the image. | | fallback | ReactNode | Bank Name Text | Content to show if the logo fails to load. | | loading | 'lazy' \| 'eager' | 'lazy' | Image loading strategy. |

[!TIP] Type Safety with Dynamic Data If you are mapping through dynamic data (e.g., from an API), our BankName type is built to be flexible. It allows any string but will still provide full autocomplete for supported bank keys in your IDE.

Supported Banks & E-Wallets

Below are some of the supported keys for the name prop (including regional and international banks):

• Banks: bca, mandiri, bni, bri, cimb, permata, danamon, maybank, ocbc, hsbc, citibank, standard-chartered, panin, btn, mega, mega-syariah, seabank.
• E-Wallets: gopay, ovo, dana, shopeepay, linkaja.

License

MIT © M. Shadiq Firmansyah Basiru