React-kofi-button NPM

react-kofi-button

React Components to link to your Ko-fi profile.

With npm

npm i react-kofi-button

or yarn

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.

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

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.

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

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

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

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.