Skip to content

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

Notifications You must be signed in to change notification settings

guidovizoso/react-monetize

Repository files navigation

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, 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]

Contributors

👤 Muhammad Ali [email protected]

Related projects

Show your support

Give a ⭐️ if this project helped you!


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

About

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

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •