!Version
!CI
!License: MIT
!npm

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.

``sh
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

`javascript
import { MonetizeProvider } from 'react-monetize';

function App() {
return (



);
}

export default App;
`

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

$3

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

Events are the payment events registered stored as CustomEvent.

`javascript
import { useStatus } from 'react-monetize';

function Component() {
const { state, events } = useStatus();

return (
<>


State: {state}


{events.map((e) => (

• {${e.detail.amount} ${e.detail.assetCode}}

))}


export default Component;
`

$3

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

`javascript
import { useContent } from 'react-monetize';

function MonetizedContent() {
const { isMonetized } = useContent();
return (

{isMonetized ?

export default MonetizedContent;
`

Contribute

Clone and then:

`sh
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

- Twitter: @guido_vizoso
- Github: @guidovizoso
- LinkedIn: @guidovizoso

Contributors

👤 Muhammad Ali

- 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_