发布于 2026-01-06 1 阅读
0

react-monetize beta 版现已推出 💸 react-monetize DEV 全球展示挑战赛,由 Mux 呈现:展示你的项目!

react-monetize beta 版现已推出💸

react-monetize

由 Mux 赞助的 DEV 全球展示挑战赛:展示你的项目!

大家好!

最近我发了一篇关于 react-monetize 以及我想要实现的目标的文章。今天我终于做出了一个可用的 MVP(最小可行产品),非常乐意与大家分享,欢迎大家提供反馈、贡献、想法或其他任何意见。

react-monetize 是什么?

它是一组辅助函数和钩子,可以轻松地将新的Web Monetization API集成到您的 React 项目中。

我可以在SSR上使用它吗?

它已在独立 React、Create React App 和 Next.js 上测试过。还需要进一步测试才能确定它是否适用于 Gatsby、Preact 和其他框架。

它基于哪些技术?

目前支持 Typescript、React (>=16.8) 和 Rollup。ESLint、Prettier 和 Jest 即将推出!

我该如何使用它?

安装、使用信息和示例可在Github仓库中找到:

GitHub 标志 guidovizoso / react-monetize

用于加速您与 Web Monetization API 集成的辅助工具和钩子

💸

react-monetize

版本 许可证:MIT 推特:guido\_vizoso

用于加速您与Web Monetization API集成的辅助工具和钩子

安装

目前支持 React、Create React App 和 Next.js,尚未在 Gatsby 或 Preact 中进行测试。

yarn add react-monetize

用法

用 标签包裹你的应用MonetizeProvider,并添加你的支付指针。

您可以点击此处了解如何获取:https://webmonetization.org/docs/receiving

import { MonetizeProvider } from  '
 react -monetize ' function  App ( ) {
   return (
     < MonetizeProvider paymentPointer = " myPaymentPointer " > 
      < YourApp / > 
    </MonetizeProvider>
}
导出 默认 应用程序

现在,您可以在应用程序的任何位置使用两个钩子:

使用状态

State 是 Web Monetization API 根据此列表提供的当前状态。

import { useStatus } from  ' react-monetize '
 function  Component () {
   const { state , events } =  useStatus ();

  返回<> 
      <p>状态 { state }

最后想说的

欢迎留言或在推特上联系我。

希望你喜欢,祝你一周愉快!

文章来源:https://dev.to/guidovizoso/introducing-react-monetize-29hp