You can now Monetize your React Apps! Here's how to enable Web Monetization
Tags: webmonetization, interledger, meta, coil
Published: 2020-07-08 06:44:21

---
title: You can now Monetize your React Apps! Here's how to enable Web Monetization
published: true
description: How to enable Web monetization in React projects with 4 lines of code
tags: webmonetization, interledger, meta, coil
//cover_image: https://direct_url_to_image.jpg
---

In June, [DEV announced](https://dev.to/devteam/dev-is-now-web-monetized-21db) 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](https://coil.com/creator/how-to-monetize#On-platform).

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](https://www.npmjs.com/package/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.

```tsx
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](https://www.npmjs.com/package/react-web-monetization).

```tsx
 <>
    {/* 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](https://webmonetization.org/docs/getting-started) and the [Specs](https://webmonetization.org/specification.html) to learn more.

## Contribute to [react-webmonetization-meta](https://www.npmjs.com/package/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](https://www.npmjs.com/package/react-webmonetization-meta) repo. I will be happy to merge them! 🚀🚀🚀


Good luck, and happy monetizing!