guidovizoso / react-monetize

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

react-monetize

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

react-monetize.now.sh

Install

Currently supports React, Create React App, Next Js and Gatsby (through gatsby-plugin-monetization). Not yet tested in Gatsby or Preact. Not yet tested in 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();

    return (
        <>
            <p>State: {state}</p>
            <ul>
                {events.map((e) => (
                    <li key={e.timeStamp}>{`${e.detail.amount} ${e.detail.assetCode}`}</li>
                ))}
            </ul>
        </>
    );
}

export default Component;

useContent

Provides a boolean that indicates if the user has provided a payment or not so you can choose to show paid content.

import { useContent } from 'react-monetize';

function MonetizedContent() {
    const { isMonetized } = useContent();
    return (
        <React.Fragment>
            {isMonetized ? <div>My premium content</div> : <div>You need to subscribe to access premium content</div>}
        </React.Fragment>
    );
}

export default MonetizedContent;

Contribute

Clone and then:

cd react-monetize
yarn
yarn build
cd examples/next-js
yarn
yarn dev

Develop.

WIP

• Improve documentation code and details.
• Add documentation project to the library code.

Future changes

• Remove global declaration for document once the property is added to DOM types.
• Monetization UI?

Author

👤 Guido Vizoso [email protected]

• Twitter: @guido_vizoso
• Github: @guidovizoso
• LinkedIn: @guidovizoso

Contributors

👤 Muhammad Ali [email protected]

• Twitter: @muhammadali_io
• Github: @mrmuhammadali

Related projects

• Sharafian's approach: https://github.com/sharafian/react-web-monetization
• jkga's vanilla: https://github.com/jkga/is-web-monetized
• sorxrob's Svelte project: https://github.com/sorxrob/svelte-monetization

Show your support

Give a ⭐️ if this project helped you!

---

This README was generated with ❤️ by readme-md-generator

react-monetize's Issues

isMonetized is false during monetizationprogress

react-monetize/src/MonetizeContext/reducers.ts

Line 43 in 082f7c1

isMonetized: false,

Shouldn't it be true during progress?

Trying to use your library and running into a bug.