{"id":19815301,"url":"https://github.com/costasak/react-kofi-button","last_synced_at":"2025-05-01T10:31:33.592Z","repository":{"id":40253806,"uuid":"475165292","full_name":"CostasAK/react-kofi-button","owner":"CostasAK","description":"React Components to link to your Ko-fi profile","archived":false,"fork":false,"pushed_at":"2023-03-15T02:48:43.000Z","size":11071,"stargazers_count":9,"open_issues_count":4,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-22T18:54:29.046Z","etag":null,"topics":["button","button-widget","buttons","buttons-collection","ko-fi","kofi","react","react-components","reactjs"],"latest_commit_sha":null,"homepage":"https://costasak.github.io/react-kofi-button/","language":"JavaScript","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/CostasAK.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":"CostasAK","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2022-03-28T20:17:51.000Z","updated_at":"2025-01-04T02:28:56.000Z","dependencies_parsed_at":"2024-06-21T19:05:16.084Z","dependency_job_id":"d7ed675f-0cc2-42be-9b9d-1963a1a72da8","html_url":"https://github.com/CostasAK/react-kofi-button","commit_stats":{"total_commits":112,"total_committers":3,"mean_commits":"37.333333333333336","dds":0.0535714285714286,"last_synced_commit":"a7aa9dabc0163de3d92111b2edade3e5c6f12e36"},"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CostasAK%2Freact-kofi-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CostasAK%2Freact-kofi-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CostasAK%2Freact-kofi-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CostasAK%2Freact-kofi-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CostasAK","download_url":"https://codeload.github.com/CostasAK/react-kofi-button/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251859932,"owners_count":21655642,"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":["button","button-widget","buttons","buttons-collection","ko-fi","kofi","react","react-components","reactjs"],"created_at":"2024-11-12T10:05:28.728Z","updated_at":"2025-05-01T10:31:33.088Z","avatar_url":"https://github.com/CostasAK.png","language":"JavaScript","funding_links":["https://ko-fi.com/CostasAK","https://ko-fi.com/costasak"],"categories":[],"sub_categories":[],"readme":"# react-kofi-button\n\n[![GitHub Deployment Workflow Status](https://img.shields.io/github/workflow/status/costasak/react-kofi-button/NodeJS%20Continuous%20Deployment?style=for-the-badge\u0026logo=nodedotjs)](https://github.com/CostasAK/react-kofi-button/actions/workflows/node-cd.yml)\n[![version](https://img.shields.io/npm/v/react-kofi-button?style=for-the-badge\u0026logo=npm)](https://www.npmjs.com/package/react-kofi-button?activeTab=versions)\n[![weekly downloads](https://img.shields.io/npm/dw/react-kofi-button?style=for-the-badge\u0026logo=npm)](https://www.npmjs.com/package/react-kofi-button)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge\u0026logo=prettier)](https://github.com/prettier/prettier)\n[![GitHub](https://img.shields.io/github/license/costasak/react-kofi-button?style=for-the-badge)](https://github.com/CostasAK/react-kofi-button/blob/main/LICENSE)\n[![Stars](https://img.shields.io/github/stars/costasak/react-kofi-button?style=for-the-badge\u0026logo=github)](https://github.com/CostasAK/react-kofi-button)\n[![Ko-fi](https://img.shields.io/badge/support_me_on_ko--fi-F16061?style=for-the-badge\u0026logo=kofi\u0026logoColor=f5f5f5)](https://ko-fi.com/CostasAK)\n\nReact Components to link to your Ko-fi profile.\n\n- [How to use](#how-to-use)\n  - [Installation](#installation)\n  - [`\u003cKofiButton /\u003e`](#kofibutton-)\n    - [Importing](#importing)\n    - [Examples](#examples)\n    - [Properties](#properties)\n\n## How to use\n\n### Installation\n\nWith npm\n\n```bash\nnpm i react-kofi-button\n```\n\nor yarn\n\n```bash\nyarn add react-kofi-button\n```\n\n### `\u003cKofiButton /\u003e`\n\nDisplays a configurable button that scales to the current font size and links to the profile page of the configured user.\n\n#### Importing\n\n```javascript\nimport { KofiButton } from \"react-kofi-button\";\n```\n\n#### Examples\n\nThese buttons would all lead to [`https://ko-fi.com/costasak`](https://ko-fi.com/costasak) on click, since the `username` property is set to `\"costasak\"` on all of them.\n\n##### Default preset\n\n```jsx\n\u003cKofiButton username=\"costasak\" label=\"Support me\" /\u003e\n```\n\n![Default preset example GIF](/screenshots/default_preset.gif?raw=true \"Default preset example GIF\")\n\n##### Thin preset\n\n```jsx\n\u003cKofiButton\n  username=\"costasak\"\n  label=\"Thin preset\"\n  preset=\"thin\"\n  backgroundColor=\"kofiRed\"\n/\u003e\n```\n\n![Thin preset example GIF](/screenshots/thin_preset.gif?raw=true \"Thin preset example GIF\")\n\n##### Skinny preset\n\n```jsx\n\u003cKofiButton\n  username=\"costasak\"\n  label=\"Skinny preset\"\n  preset=\"skinny\"\n  backgroundColor=\"kofiGrey\"\n/\u003e\n```\n\n![Skinny preset example GIF](/screenshots/skinny_preset.gif?raw=true \"Skinny preset example GIF\")\n\n#### Properties\n\n| Property          | Required? | Default                 | Description                                                                                                                                                                                       |\n|-------------------|-----------|-------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `username`        | Required  | `\"costasak\"`            | Your Ko-fi username, which appears in the URL to your profile.                                                                                                                                    |\n| `label`           | Optional  | `\"Support Me on Ko-fi\"` | The text on the button.                                                                                                                                                                           |\n| `title`           | Optional  | `\"\"`                    | Text that shows on hovering the button.                                                                                                                                                           |\n| `preset`          | Optional  | `\"\"`                    | One of several presets that change the style of the button. See examples.                                                                                                                         |\n| `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.                                                |\n| `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. |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcostasak%2Freact-kofi-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcostasak%2Freact-kofi-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcostasak%2Freact-kofi-button/lists"}