DEV Community

Guido Vizoso

Posted on May 11, 2020

Announcing react-monetize ⚛️

#webmonetization #gftwhackathon #react #opensource

Why re-invent the wheel everytime?
If there's something we as React devs love is the infinite and ever expanding ecosystem of tools and packages at our disposal.

The GFTW Hackaton provided a unique opportunity to add our grain of sand to the community and build something to help future users of the web monetization api. That's why I'm building react-monetize 💸.

What is it about?

It's a set of helpers to speed up development time and integrate easily with the new Web Monetization Api.

Is there a mission

Yes. It has to be easy to use, performant and must support React and Next.js.

Prototype

To use react-monetize you'll have to wrap your app in a MonetizeProvider and give it a payment pointer. After that you'll have the data available for you at any time.

import { MonetizeProvider } from 'react-monetize';
function App() {
  return (
    <MonetizeProvider paymentPointer="myPaymentPointer">
      <AppCode />
    </MonetizeProvider>
  );
}
export default App;

Feedback

Please feel free to comment your thoughts about the project and any idea is welcomed.

Have a great week!

Top comments (4)

Emma Goto 🍙 • May 11 '20

You can also check out this repository for some inspiration:

sharafian / react-web-monetization

React component that lets you access the state of Web Monetization

React Web Monetization

React module that lets you access the state of Web Monetization

Examples

This repo contains several usage examples in example/. To host the site and view the examples, run:

cd example
npm install
npm start

Then go to http://localhost:3000.

Usage

Enabling Web Monetization

You will still need to insert the Web Monetization meta tag into your document's <head>. This should be done in the HTML file that react renders into, not in React.

For a specification of this meta tag, see Interledger RFC 0028

Web Monetization State Hook

This hook will update when the first web-monetization micropayment occurs on the page and the state goes from pending to started.

import React from 'react'
import { useMonetizationState } from 'react-web-monetization'
const MyMessage = props => {
  const monetization = useMonetizationState()
  return <p&gt
    {monetization.state ===

…