@freeunionp/btcdonate

中文

Standalone BTC Donation Component

React + TypeScript The component provides the following main functionalities:

• BTC Donation Component: An embeddable React component that allows you to easily set up a Bitcoin donation feature on your website.

Supported Currencies The component supports the following currency codes for conversion:

• US Dollar (USD)
• Euro (EUR)
• British Pound (GBP)
• Japanese Yen (JPY)
• Chinese Yuan (CNY)
• UAE Dirham (AED)
• South African Rand (ZAR)
• Brazilian Real (BRL)

Installation

Install the component in your React project using npm or yarn:

# Using npm
npm i @freeunionp/btcdonate

# Or using yarn
yarn add @freeunionp/btcdonate

Usage

Import the component into your project and customize it using the provided props.

import React from 'react';
import { BitcoinDonate } from '@freeunionp/btcdonate';

const App = () => {
  return (
    <div>
      <h1>Support Us</h1>
      <BitcoinDonate
        address="bc1qx6xswq65n5x864vwj77lrtn0xn2rmlh3ypfkk8"
        title="Support Us"
        showButton={true}
        buttonText="💸 Donate Bitcoin"
        currency="usd"
        presets={[20, 50, 200]}
        onClose={() => console.log("Modal closed")}
      />
    </div>
  );
};

export default App;

| Prop Name | Type | Default Value | Description | | ------------- | ----------------------------------------- | -------------------------------------------- | ----------------------------------------------------------------------- | | address | string | bc1qx6xswq65n5x864vwj77lrtn0xn2rmlh3ypfkk8 | Required. The Bitcoin wallet address. | | title | string | "Support Us" | The title text for the donation modal. | | description | string | "Use this QR code or address below" | The description text displayed in the modal. | | currency | 'usd' \| 'eur' \| 'gbp' \| 'jpy' \| ... | "usd" | The base currency for exchange rate conversion (supports 8 currencies). | | presets | number[] | [20, 50, 200] | An array of numbers for preset donation amount buttons. | | showButton | boolean | true | Whether to display the button that triggers the modal. | | buttonText | string | "Donate Bitcoin" | The text for the button that triggers the modal. | | onClose | () => void | () => {} | A callback function triggered when the modal is closed. |

独立的BTC捐赠部件

React + TypeScript

該組件提供以下主要功能：

• BTC 捐贈組件：一個可嵌入的 React 組件，方便你在網站上輕鬆設定比特幣捐贈功能。

• 設置兌款貨幣：支持的貨幣包括：美元（USD）、歐元（EUR）、英鎊（GBP）、日元（JPY）、人民幣（CNY）、阿聯酋迪拉姆（AED）、南非蘭特（ZAR）和巴西雷亞爾（BRL）。

安裝

使用 npm 或 yarn 將此組件安裝到你的 React 專案中：

# 使用 npm
npm i @freeunionp/btcdonate

# 或使用 yarn
yarn add @freeunionp/btcdonate

用法

將組件匯入到你的專案中，並使用 props 進行客製化。

import React from 'react';
import { BitcoinDonate } from '@freeunionp/btcdonate';

const App = () => {
  return (
    <div>
      <h1>支持我們</h1>
      <BitcoinDonate
        address="bc1qx6xswq65n5x864vwj77lrtn0xn2rmlh3ypfkk8"
        title="支持我們"
        showButton={true}
        buttonText="💸 捐贈比特幣"
        currency="usd"
        presets={[20, 50, 200]}
        onClose={() => console.log("彈窗已關閉")}
      />
    </div>
  );
};

export default App;

| Prop 名稱 | 型別 | 預設值 | 說明 | | ------------- | ----------------------------------------- | -------------------------------------------- | ---------------------------------- | | address | string | bc1qx6xswq65n5x864vwj77lrtn0xn2rmlh3ypfkk8 | 必填。比特幣錢包地址。 | | title | string | "Support Us" | 彈窗標題文字。 | | description | string | "Use this QR code or address below" | 彈窗描述文字。 | | currency | 'usd' \| 'eur' \| 'gbp' \| 'jpy' \| ... | "usd" | 兌款匯率的基準貨幣，目前支持八種貨幣。 | | presets | number[] | [20, 50, 200] | 預設的捐贈金額按鈕。 | | showButton | boolean | true | 是否顯示觸發彈窗的按鈕。如果設置為 false，你需要手動觸發彈窗。 | | buttonText | string | "Donate Bitcoin" | 觸發彈窗按鈕的文字。 | | onClose | () => void | () => {} | 彈窗關閉時觸發的回調函式。 |