react-kofi-button


React Components to link to your Ko-fi profile.

- How to use
- Installation
-
- Importing
- Examples
- Properties

How to use

$3

With npm

``bash
npm i react-kofi-button
`

or yarn

`bash
yarn add react-kofi-button
`

$3

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

`

!Default preset example GIF

##### Thin preset

`jsx
username="costasak"
label="Thin preset"
preset="thin"
backgroundColor="kofiRed"
/>
`

!Thin preset example GIF

##### Skinny preset

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