@freeunionp/btcdonate/README.md

A standalone React component for BTC donations.

# @freeunionp/btcdonate

 [中文](#独立的BTC捐赠部件)
## 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:

```Bash

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

```TypeScript

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 專案中：

```Bash

# 使用 npm
npm i @freeunionp/btcdonate

# 或使用 yarn
yarn add @freeunionp/btcdonate
```

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

```TypeScript

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`                              | `() => {}`                                   | 彈窗關閉時觸發的回調函式。                      |