react-kofi-button-modern

A clean, customizable Ko-fi support button for React with the new rounded Ko-fi logo. Drop it into any app to let visitors support you on Ko-fi, styled to match Ko-fi's branding out of the box but tweakable to fit your design.

The button includes a dismissible close (X) button by default, which can be disabled.

Image preview:

Try it out: 🚀 Live Demo

Installation

npm install react-kofi-button-modern

Usage

import KofiButton from 'react-kofi-button-modern';

export default function App() {
  return (
    <div>
      {/* your app */}
      <KofiButton kofiId="YOUR_KOFI_ID" />
    </div>
  );
}

By default, the button renders as a fixed-position floating pill at the bottom of the screen with a wobbly animated Ko-fi cup icon.

Props

| Prop | Type | Default | Description | | -------------- | --------- | ----------------------- | -------------------------------------------------------------------------- | | kofiId | string | required | Your Ko-fi ID (from ko-fi.com/YOUR_ID) | | color | string | "#72a4f2" | Background color of the button | | label | string | "Support me on Ko-fi" | Button text | | useSeparator | boolean | false | If true, shows a visual separator between the button text and close button | | dismissible | boolean | true | Whether to show the close (X) button and allow dismissing the component |

Examples

Non-dismissible button

<KofiButton kofiId="YOUR_KOFI_ID" dismissible={false} />

Custom color and label

<KofiButton
  kofiId="YOUR_KOFI_ID"
  color="#ff5e5b"
  label="Buy me a coffee"
/>

With separator

<KofiButton kofiId="YOUR_KOFI_ID" useSeparator />

Development

git clone https://github.com/cgiangreco/react-kofi-button-modern
cd react-kofi-button-modern
npm install
npm run build

License

MIT