Welcome to react-monetize

It's a set of hooks and helpers to get you nice and fast with the new web-monetization-api.


This project is a runner up for the GLTW & dev.to hackaton.

Up and running


You can use yarn or npm.

yarn add react-monetize
Configure the MonetizeProvider

Import MonetizeProvider, wrapp your App and give it a paymentPointer.

You can learn more about payment pointers here: https://webmonetization.org/#providers
import { MonetizeProvider } from 'react-monetize';

function App() {
    return (
        <MonetizeProvider paymentPointer="myPaymentPointer">
            <YourApp />

export default App;
Use the hooks!

Now you can import the monetization hooks to take advantage of the API.

  • useStatus gives you the current monetization state and the payment events.
  • useContent provides an easy way to show your users your premium content.
import { useStatus, useContent } from 'react-monetize';

function Component() {
    const { state, events } = useStatus();
    const { isMonetized } = useContent();
    return (
            <p>State: {state}</p>
            <p>{JSON.stringify({ events })}</p>
            {isMonetized ? <p>Premium</p> : <p>Not</p>}
export default Component;

Live example

You can safely copy and paste this if that's what you've come for. It'll just work.


  • Events:
You need to subscribe get access
import { MonetizeProvider, useStatus, useContent } from 'react-monetize';
function MyApp() {
    const { state, events } = useStatus();
    const { isMonetized } = useContent();
    return (
            <p>State: <b>{state}</b></p>
                {events.map((evt) => (
                    <li key={evt.timeStamp}>
            {isMonetized ? <span>Thank you 💚</span> : <span>You need to subscribe get access</span>}
            <button onClick={monetize}>Add (fake) payment</button>
function LiveDemo() {
    return (
        <MonetizeProvider paymentPointer="myPaymentPointer">
            <MyApp />