react-kofi-button

React Components to link to your Ko-fi profile.

• How to use
  • Installation
  • <KofiButton />
    • Importing
    • Examples
    • Properties

How to use

Installation

With npm

npm i react-kofi-button

or yarn

yarn add react-kofi-button

<KofiButton />

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

Importing

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

Examples

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

Default preset

<KofiButton username="costasak" label="Support me" />

Thin preset

<KofiButton
  username="costasak"
  label="Thin preset"
  preset="thin"
  backgroundColor="kofiRed"
/>

Skinny preset

<KofiButton
  username="costasak"
  label="Skinny preset"
  preset="skinny"
  backgroundColor="kofiGrey"
/>

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