You can now Monetize your React Apps! Here's how to enable Web Monetization

In June, DEV announced that DEV is web monetized. That got me thinking about Web Monetization and how to enable Web Monetization in as many websites and apps as possible so that Creators can get paid for their work, and users/consumers can enjoy an ad-free experience.

As React is one of the most-used web Frameworks, I started exploring existing React Libraries to see if many Web Monetization libraries exist. I found a few, but they did too much. As a newbie to Web monetization, I wanted something as easy as adding only a few lines to my React App. That is what I set out to build: A super simple Library to set up web monetization in a React project.

Before we jump into the details, here are some benefits of Web Monetization:

1. You can easily pay users for content they create on your site: The user adds their Payment Pointer address to their profile, and payments are streamed to them when users consume content they create on your Platform. See more on the Coil website.

2. Enjoy ad-free content while paying for only what you consume.

3. Monetize your content. Yes. You can quickly get paid on your site for the content you created. No need to publish on third-party sites!

Set up Web Monetization for in React

Here's how to enable Web Monetization for your React App.

• Add the monetization meta tag using the react-webmonetization-meta package. This package allows you to customize the payment pointer for components/pages programmatically. I wrote this in one night, so it is super easy to use.

import React, { Component } from 'react'

import ReactWebMonetizationMeta from 'react-webmonetization-meta'

const Example = () => {
  // Change to:
  //   your Interledger payment pointer or
  //   the Interledger payment pointer of your user or
  //   the Interledger payment pointer of the content creator
  const PaymentPointer = '$ilp.uphold.com/B3wYJrpHiUyQ'
  return (
    <div>
      Some JSX
      <ReactWebMonetizationMeta PaymentPointer={PaymentPointer} />
      Some other JSX
    </div>
  )
}

• Hide/Show some content depending on a user's monetization status. For example, if a user has web amortization enabled, you can show rich video content. Use the IfWebMonetized wrapper from react-web-monetization.

 <>
    {/* This is the content displayed to web monetized users */}
    <IfWebMonetized>
      The answer to the ultimate question of life, the universe, and everything is <strong>42</strong>.
    </IfWebMonetized>
  </>

That's all there is to it! For more information about Web Monetization, check out the Web Monetization Quick Start Guide and the Specs to learn more.

Contribute to react-webmonetization-meta on Github

And please, let me know if you have any questions. And open issues or pull requests in the in the react-webmonetization-meta repo. I will be happy to merge them! 🚀🚀🚀

Good luck, and happy monetizing!