JSPM – kofi-react-widget@1.1.0

Package Exports

kofi-react-widget
kofi-react-widget/dist/cjs/index.js
kofi-react-widget/dist/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (kofi-react-widget) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React floating button component to accept donations to your Ko-fi account without leaving your app. Works on both Next.js and pure React apps, but check out how to use it below because, for now, it's a bit different for each of them. Check below for examples.

Usage

In a Nextjs app

import { KofiFloatingButton } from "kofi-react-widget";

export default YourComponent() {
    ...
    return (
    ...
    <KofiFloatingButton username="rodribuilds" background="#fbbf24" textColor="#323842" text="Coffee?" />
    )
}

In a React app

You can use the custom hook in your App component like so:

import { useFloatingButton } from "kofi-react-widget";

...

function App() {
    useFloatingButton({ username: 'rodribuilds', text: '...', ... })
    ...

Props

Name	Description	Type	Required	Default
username	Your Ko-fi username	string	true	---
text	Button text	string	false
background	Button background color (HEX value)	string	false	#00b9fe
textColor	Button text color (HEX value)	string	false.	#FFF

Examples

You can see a working example here.