React Components to link to your Ko-fi profile
npm install react-kofi-button






React Components to link to your Ko-fi profile.
- How to use
- Installation
-
- Importing
- Examples
- Properties
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 on click, since the username property is set to "costasak" on all of them.
##### Default preset
`jsx`
##### Thin preset
`jsx`
label="Thin preset"
preset="thin"
backgroundColor="kofiRed"
/>
##### Skinny preset
`jsx`
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. |