React Web Monetization

I’ve been playing around with a React library for Web Monetization, using React Hooks

The goal is to enable React developers to:

  • Hide ads for users that have Web Monetization enabled
  • Show a thank-you message to users who have Web Monetization enabled
  • Display counters to show Web Monetized users how much the site has received

Things that it cannot do:

  • Securely show premium content (this library can help but it requires server-side code too)
  • Add the Web Monetization meta tag to your site (the meta tag must be there at page load before any JS runs, as per the RFC)

I’d love to get some feedback on the API, especially from anyone who wants to try it out on their own site! It’s available on NPM as react-web-monetization.

7 Likes

I’ve been using Vue.js for our development and have utilized the “vue-meta” package to accomplish the task of placing the web-monetization script into into the head of our app’s pages/components.

For our apps that are meant to be web-monetized entirely (all pages/components) it is easiest to simply load the vue-meta plugin within the main.js of your Vue app and then indicate the meta information within the component/page.

For apps that require selective use of the web-monetization script - you can simply load vue-meta as needed per page/component and then specify it within the export section of the page/component.

This is obviously a very simple implementation - but it seems to be working as intended.