https://github.com/costasak/react-kofi-button

React Components to link to your Ko-fi profile
https://github.com/costasak/react-kofi-button

button button-widget buttons buttons-collection ko-fi kofi react react-components reactjs

Last synced: 10 months ago
JSON representation

React Components to link to your Ko-fi profile

• Host: GitHub
• URL: https://github.com/costasak/react-kofi-button
• Owner: CostasAK
• License: mit
• Created: 2022-03-28T20:17:51.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2023-03-15T02:48:43.000Z (almost 3 years ago)
• Last Synced: 2025-04-22T18:54:29.046Z (10 months ago)
• Topics: button, button-widget, buttons, buttons-collection, ko-fi, kofi, react, react-components, reactjs
• Language: JavaScript
• Homepage: https://costasak.github.io/react-kofi-button/
• Size: 10.6 MB
• Stars: 9
• Watchers: 2
• Forks: 2
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-kofi-button

[![GitHub Deployment Workflow Status](https://img.shields.io/github/workflow/status/costasak/react-kofi-button/NodeJS%20Continuous%20Deployment?style=for-the-badge&logo=nodedotjs)](https://github.com/CostasAK/react-kofi-button/actions/workflows/node-cd.yml)

[![version](https://img.shields.io/npm/v/react-kofi-button?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/react-kofi-button?activeTab=versions)

[![weekly downloads](https://img.shields.io/npm/dw/react-kofi-button?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/react-kofi-button)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge&logo=prettier)](https://github.com/prettier/prettier)

[![GitHub](https://img.shields.io/github/license/costasak/react-kofi-button?style=for-the-badge)](https://github.com/CostasAK/react-kofi-button/blob/main/LICENSE)

[![Stars](https://img.shields.io/github/stars/costasak/react-kofi-button?style=for-the-badge&logo=github)](https://github.com/CostasAK/react-kofi-button)

[![Ko-fi](https://img.shields.io/badge/support_me_on_ko--fi-F16061?style=for-the-badge&logo=kofi&logoColor=f5f5f5)](https://ko-fi.com/CostasAK)

React Components to link to your Ko-fi profile.

- [How to use](#how-to-use)

  - [Installation](#installation)

  - [``](#kofibutton-)

    - [Importing](#importing)

    - [Examples](#examples)

    - [Properties](#properties)

## How to use

### Installation

With npm

```bash

npm i react-kofi-button

```

or yarn

```bash

yarn add react-kofi-button

```

### ``

Displays a configurable button that scales to the current font size and links to the profile page of the configured user.

#### Importing

```javascript

import { KofiButton } from "react-kofi-button";

```

#### Examples

These buttons would all lead to [`https://ko-fi.com/costasak`](https://ko-fi.com/costasak) on click, since the `username` property is set to `"costasak"` on all of them.

##### Default preset

```jsx

```

![Default preset example GIF](/screenshots/default_preset.gif?raw=true "Default preset example GIF")

##### Thin preset

```jsx

```

![Thin preset example GIF](/screenshots/thin_preset.gif?raw=true "Thin preset example GIF")

##### Skinny preset

```jsx

```

![Skinny preset example GIF](/screenshots/skinny_preset.gif?raw=true "Skinny preset example GIF")

#### Properties

| Property          | Required? | Default                 | Description                                                                                                                                                                                       |

|-------------------|-----------|-------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|

| `username`        | Required  | `"costasak"`            | Your Ko-fi username, which appears in the URL to your profile.                                                                                                                                    |

| `label`           | Optional  | `"Support Me on Ko-fi"` | The text on the button.                                                                                                                                                                           |

| `title`           | Optional  | `""`                    | Text that shows on hovering the button.                                                                                                                                                           |

| `preset`          | Optional  | `""`                    | One of several presets that change the style of the button. See examples.                                                                                                                         |

| `backgroundColor` | Optional  | `"kofiBlue"`            | The background color of the button. Can be one of the named Ko-fi colors (kofiBlue, kofiRed, kofiYellow or kofiGrey) or any valid CSS color value.                                                |

| `animation`       | Optional  | `true`                  | Whether the Ko-fi logo should be animated. Accepts `true`, `"true"`, `"on_hover"`, `false` and `"false"`. The `"on_hover"` option causes the logo to only be animated when the button is hovered. |