Skip to content

CostasAK/react-kofi-button

Repository files navigation

react-kofi-button

GitHub Deployment Workflow Status version weekly downloads code style: prettier GitHub Stars Ko-fi

React Components to link to your Ko-fi profile.

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" />

Default preset example GIF

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

Thin preset example GIF

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

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.