Helpers and hooks to speed up your integration with Web Monetization API
npm install react-monetizeHelpers and hooks to speed up your integration with Web Monetization API
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
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:
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}
}export default Component;
`
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 ? My premium content : You need to subscribe to access premium content}
);
}
export default MonetizedContent;
`
Clone and then:
`sh``
cd react-monetize
yarn
yarn build
cd examples/next-js
yarn
yarn dev
Develop.
- Improve documentation code and details.
- Add documentation project to the library code.
- Remove global declaration for document once the property is added to DOM types.
- _Monetization UI?_
👤 Guido Vizoso
- Twitter: @guido_vizoso
- Github: @guidovizoso
- LinkedIn: @guidovizoso
👤 Muhammad Ali
- Twitter: @muhammadali_io
- Github: @mrmuhammadali
- 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
Give a ⭐️ if this project helped you!
---
_This README was generated with ❤️ by readme-md-generator_