DEV Community

Cover image for react-monetize submition 💸
Guido Vizoso
Guido Vizoso

Posted on • Edited on

4 2

react-monetize submition 💸

What I built

react-monetize is a set of helpers and hook to easily integrate the Web Monetization API with React.

Submission Category: Foundational Technology

Demo

Demo and code can be found on the documentation website:
https://react-monetize.now.sh/#live-example

Link to Code

GitHub logo guidovizoso / react-monetize

Helpers and hooks to speed up your integration with Web Monetization API

money

react-monetize

Helpers and hooks to speed up your integration with Web Monetization API

react-monetize.now.sh

Version CI License: MIT npm Twitter: guido\_vizoso

Install

Currently supports React, Create React App and Next Js Not yet tested in Gatsby or Preact.

yarn add react-monetize

Usage

Wrap your app with the MonetizeProvider and add your payment pointer.

You can read how to get one here: https://webmonetization.org/docs/receiving

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

Now you have two hooks available to use anywhere in your app:

useStatus

State is the current state provided by Web Monetization API according to this list.

Events are the payment events registered stored as CustomEvent.

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

How I built it

First thing I did was heading to https://webmonetization.org and read the documentation.
With that knowledge in mind I prepared the layout for creating the components.
The goal was to make it as React as possible so people could use the benefits of the Web Monetization API without having to worry about integration. Just wrap your App, add your payment pointer and you're good to go.
Once you prepared your App you'll have access to useStatusand useContent to build with the API.

react-monetize uses these technologies:

  • Typescript.
  • Rollup for the bundling.
  • React (obviusly).
  • React Testing Library & Jest for testing.
  • ESLint & Prettier to ensure code quality.

Additional Resources/Info

Hope you liked the project and feel free to comment, make a PR, fork it or use it in your own idea!
Stay safe and have a great week!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (2)

Collapse
 
dfoderick profile image
Dave Foderick

Thanks Guido. I am enjoying your library.

Collapse
 
guidovizoso profile image
Guido Vizoso

Glad you like it and thanks again for spotting that issue!

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up