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.