{"id":13714962,"url":"https://github.com/guidovizoso/react-monetize","last_synced_at":"2025-05-07T03:31:04.195Z","repository":{"id":40767916,"uuid":"263392732","full_name":"guidovizoso/react-monetize","owner":"guidovizoso","description":"Helpers and hooks to speed up your integration with Web Monetization API","archived":false,"fork":false,"pushed_at":"2024-02-02T20:05:04.000Z","size":1454,"stargazers_count":36,"open_issues_count":26,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-21T09:52:19.747Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://react-monetize.now.sh","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/guidovizoso.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-05-12T16:34:11.000Z","updated_at":"2025-04-09T09:02:03.000Z","dependencies_parsed_at":"2024-01-15T17:14:35.892Z","dependency_job_id":"b649b794-5da2-4cc7-912b-d05b32eedcb9","html_url":"https://github.com/guidovizoso/react-monetize","commit_stats":{"total_commits":23,"total_committers":4,"mean_commits":5.75,"dds":"0.30434782608695654","last_synced_commit":"e682b94417634e3ec4da72394b59929e48db639e"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guidovizoso%2Freact-monetize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guidovizoso%2Freact-monetize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guidovizoso%2Freact-monetize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guidovizoso%2Freact-monetize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/guidovizoso","download_url":"https://codeload.github.com/guidovizoso/react-monetize/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252806414,"owners_count":21807199,"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":[],"created_at":"2024-08-03T00:00:52.504Z","updated_at":"2025-05-07T03:31:02.722Z","avatar_url":"https://github.com/guidovizoso.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Resources"],"sub_categories":["Packages"],"readme":"\u003cdiv align=\"center\"\u003e\n\u003cimg\n    height=\"80\"\n    width=\"80\"\n    alt=\"money\"\n    src=\"https://raw.githubusercontent.com/guidovizoso/react-monetize/master/money.png\"\n  /\u003e\n\n\u003ch1\u003ereact-monetize\u003c/h1\u003e\n\u003cp\u003eHelpers and hooks to speed up your integration with Web Monetization API\u003c/p\u003e\n\u003ca href=\"https://react-monetize.now.sh\"\u003e\u003cb\u003ereact-monetize.now.sh\u003c/b\u003e\u003c/a\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\n\n![Version](https://img.shields.io/badge/version-1.0.0-blue.svg?cacheSeconds=2592000)\n![CI](https://github.com/guidovizoso/react-monetize/workflows/CI/badge.svg?tag=1.0.0-rc.6)\n![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)\n![npm](https://img.shields.io/npm/dt/react-monetize?label=npm%20downloads)\n\u003ca href=\"https://twitter.com/guido_vizoso\" target=\"_blank\"\u003e\n\u003cimg alt=\"Twitter: guido\\_vizoso\" src=\"https://img.shields.io/twitter/follow/guido_vizoso.svg?style=social\" /\u003e\n\u003c/a\u003e\n\n## Install\n\nCurrently supports React, Create React App, Next Js and Gatsby (through [gatsby-plugin-monetization](https://github.com/mrmuhammadali/gatsby-plugin-monetization)).\nNot yet tested in Gatsby or Preact. Not yet tested in Preact.\n\n```sh\nyarn add react-monetize\n```\n\n## Usage\n\nWrap your app with the `MonetizeProvider` and add your payment pointer.\n\n\u003e You can read how to get one here: https://webmonetization.org/docs/receiving\n\n```javascript\nimport { MonetizeProvider } from 'react-monetize';\n\nfunction App() {\n    return (\n        \u003cMonetizePovider paymentPointer=\"myPaymentPointer\"\u003e\n            \u003cYourApp /\u003e\n        \u003c/MonetizeProvider\u003e\n    );\n}\n\nexport default App;\n```\n\nNow you have two hooks available to use anywhere in your app:\n\n### useStatus\n\n**State** is the current state provided by Web Monetization API according to this [list](https://webmonetization.org/docs/api#states).\n\n**Events** are the payment events registered stored as `CustomEvent`.\n\n```javascript\nimport { useStatus } from 'react-monetize';\n\nfunction Component() {\n    const { state, events } = useStatus();\n\n    return (\n        \u003c\u003e\n            \u003cp\u003eState: {state}\u003c/p\u003e\n            \u003cul\u003e\n                {events.map((e) =\u003e (\n                    \u003cli key={e.timeStamp}\u003e{`${e.detail.amount} ${e.detail.assetCode}`}\u003c/li\u003e\n                ))}\n            \u003c/ul\u003e\n        \u003c/\u003e\n    );\n}\n\nexport default Component;\n```\n\n### useContent\n\nProvides a boolean that indicates if the user has provided a payment or not so you can choose to show paid content.\n\n```javascript\nimport { useContent } from 'react-monetize';\n\nfunction MonetizedContent() {\n    const { isMonetized } = useContent();\n    return (\n        \u003cReact.Fragment\u003e\n            {isMonetized ? \u003cdiv\u003eMy premium content\u003c/div\u003e : \u003cdiv\u003eYou need to subscribe to access premium content\u003c/div\u003e}\n        \u003c/React.Fragment\u003e\n    );\n}\n\nexport default MonetizedContent;\n```\n\n## Contribute\n\nClone and then:\n\n```sh\ncd react-monetize\nyarn\nyarn build\ncd examples/next-js\nyarn\nyarn dev\n```\n\nDevelop.\n\n## WIP\n\n-   Improve documentation code and details.\n-   Add documentation project to the library code.\n\n## Future changes\n\n-   Remove global declaration for document once the property is added to DOM types.\n-   _Monetization UI?_\n\n## Author\n\n👤 **Guido Vizoso \u003cguido.vizoso9@gmail.com\u003e**\n\n-   Twitter: [@guido_vizoso](https://twitter.com/guido_vizoso)\n-   Github: [@guidovizoso](https://github.com/guidovizoso)\n-   LinkedIn: [@guidovizoso](https://linkedin.com/in/guidovizoso)\n\n## Contributors\n\n👤 **Muhammad Ali \u003chi@muhammadali.io\u003e**\n\n-   Twitter: [@muhammadali_io](https://twitter.com/muhammadali_io)\n-   Github: [@mrmuhammadali](https://github.com/mrmuhammadali)\n\n## Related projects\n\n-   Sharafian's approach: https://github.com/sharafian/react-web-monetization\n-   jkga's vanilla: https://github.com/jkga/is-web-monetized\n-   sorxrob's Svelte project: https://github.com/sorxrob/svelte-monetization\n\n## Show your support\n\nGive a ⭐️ if this project helped you!\n\n---\n\n_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguidovizoso%2Freact-monetize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fguidovizoso%2Freact-monetize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguidovizoso%2Freact-monetize/lists"}