{"id":24922864,"url":"https://github.com/liddiard/react-kofi-overlay","last_synced_at":"2025-04-09T19:15:51.681Z","repository":{"id":214677200,"uuid":"736131924","full_name":"liddiard/react-kofi-overlay","owner":"liddiard","description":"A React component for accepting donations though Ko-fi without leaving your website","archived":false,"fork":false,"pushed_at":"2025-03-07T20:17:23.000Z","size":1223,"stargazers_count":7,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-09T19:15:46.680Z","etag":null,"topics":["donations","ko-fi","payments","react","typescript"],"latest_commit_sha":null,"homepage":"https://ko-fi.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/liddiard.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-27T04:30:51.000Z","updated_at":"2025-03-07T20:17:26.000Z","dependencies_parsed_at":"2023-12-29T22:06:28.627Z","dependency_job_id":"7ee202a3-2535-4b46-bdc1-b88c3f7c31e1","html_url":"https://github.com/liddiard/react-kofi-overlay","commit_stats":null,"previous_names":["liddiard/react-kofi-overlay"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liddiard%2Freact-kofi-overlay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liddiard%2Freact-kofi-overlay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liddiard%2Freact-kofi-overlay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liddiard%2Freact-kofi-overlay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/liddiard","download_url":"https://codeload.github.com/liddiard/react-kofi-overlay/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248094987,"owners_count":21046770,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["donations","ko-fi","payments","react","typescript"],"created_at":"2025-02-02T11:33:57.684Z","updated_at":"2025-04-09T19:15:51.654Z","avatar_url":"https://github.com/liddiard.png","language":"TypeScript","funding_links":["https://ko-fi.com/","https://ko-fi.com/Manage/donation-widget-setup"],"categories":[],"sub_categories":[],"readme":"# Ko-fi overlay widget\n\n[**Jump to usage**](#usage)\n\nA React component for accepting donations though [Ko-fi](https://ko-fi.com/) without leaving your website:\n\n![react-kofi-overlay example](img/example.gif)\n\n## Features\n\n- Fully customize donate button style \u0026 content\n- Accept donations in page context (no redirect)\n- Customize donation panel size \u0026 placement\n- Trigger a function when donation panel is open or closed\n\n## Motivation\n\nTo set up what Ko-fi calls their \"[Floating Button Donation Widget](https://ko-fi.com/Manage/donation-widget-setup),\" they let you do some basic customization and ask you to copy and paste two `\u003cscript\u003e` tags onto your site:\n\n![Ko-fi donation widget setup](img/kofi_donation_widget_setup.png)\n\nThis has some limitations:\n\n- Only a few choices for button CTA (call-to-action text)\n- Limited selection of background colors\n- Requires you to load a `\u003cscript\u003e` tag from their CDN, which creates a global variable, and you then need to call a method on that global to render the donate button. Few potential issues with that:\n  - Requires an extra network request on every page load\n  - Doesn't work well with modern JS bundling + import/export syntax\n  - Doesn't work well with a React component-based frontend\n  - Doesn't play nice with web frameworks like Next.js. Next.js makes it difficult to inject an arbitrary script like `kofiWidgetOverlay.draw(...)` – and to only run that code after the external `overlay-widget.js` script is loaded.\n\nThis component is designed to address those limitations.\n\n## Install\n\n```bash\nnpm install react-kofi-overlay\n```\n\n(or equivalent on your package manager)\n\n## Usage\n\n### Example\n\n```jsx\nimport { Donate } from 'react-kofi-overlay'\n\n\u003cDonate\n  username=\"liddiard\"\n  classNames={{\n    donateBtn: 'myDonateButton',\n    profileLink: 'myProfileLink'\n  }}\n  styles={{\n    panel: { marginRight: '4em' }\n  }}\n  onToggle={(open) =\u003e {\n    console.log(`Donate panel ${open ? 'opened' : 'closed'}`)\n  }}\n\u003e\n  ❤️ Support Me\n\u003c/Donate\u003e\n```\n\n**[Full example on CodePen](https://codepen.io/liddiard/pen/eYXNVXy)**\n\n### Props\n\n| Prop | Required | Type | Description |\n| ------------- | ------------- | ------------- | ------------- |\n| (children) | required | ReactNode | Contents of the donation button. Can be plain text or any React nodes that are valid children of a `\u003cbutton\u003e` element. |\n| `username` | required | string | Ko-fi profile to display in the donation panel. Corresponds to the page at `ko-fi.com/\u003cusername\u003e`. |\n| `classNames` | optional | object | Class names to apply to different parts of the component for styling. See [Styling](#styling) for more info. |\n| `styles` | optional | object | Inline styles to apply to different parts of the component for styling. See [Styling](#styling) for more info. |\n| `onToggle` | optional | function | Function to call when the donate panel is opened or closed. It receives one argument: a boolean `open` value that indicates if the panel was opened or closed. |\n\n### Styling\n\nThe component accepts `classNames` or `styles` props to customize the appearance of the donate button and various parts of the donate panel. Both props should be an object with one or more of the keys below.\n\nNote: While you could provide both `classNames` and `styles`, it isn't recommended because they will override one another. Pick one based on how you're writing CSS in your codebase.\n\n| Name  | Description |\n| ------------- | ------------- |\n| `donateBtn` | Donate `\u003cbutton\u003e` element. |\n| `panel` | Wrapper `\u003cdiv\u003e` around panel that appears when donate button is clicked. By default, the panel is anchored to the bottom right of the viewport on desktop and full screen on mobile. |\n| `closeBtn` | `\u003cbutton\u003e` to close the donate panel. |\n| `closeIcon` | (X) icon within the panel close button. |\n| `profileLink` | Wrapper `\u003cdiv\u003e` around the link to your Ko-fi profile. By default, it's anchored to the bottom of the donate panel. |\n\n#### Visual reference\n\n![Styling reference diagram](img/styling_reference.png)\n\n## Development\n\nFor local development of this plugin:\n\n1. Clone the repository\n2. `npm install`\n\nTo build: `npm run build`\n\n## Disclaimer\n\nThis project is not endorsed by or affiliated with Ko-fi Labs, the company behind [Ko-fi](https://ko-fi.com/).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliddiard%2Freact-kofi-overlay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliddiard%2Freact-kofi-overlay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliddiard%2Freact-kofi-overlay/lists"}