react-monetize docs

Welcome to react-monetize

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

Motivation

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

Up and running

Install

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 />
        </MonetizeProvider>
    );
}

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.

State:

Events:

You need to subscribe get access

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