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.
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
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.
State: {state}
-
{events.map((e) => (
- {`${e.detail.amount} ${e.detail.assetCode}`} ))}
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.
function MonetizedContent() {
const { isMonetized } = useContent();
return (
<React.Fragment>
{isMonetized ? <div>My premium contentdiv> : <div>You need to subscribe to access premium contentdiv>}
React.Fragment>
);
}
export default MonetizedContent;
Contribute
Clone and then:
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 guido.vizoso9@gmail.com
- Twitter: @guido_vizoso
- Github: @guidovizoso
- LinkedIn: @guidovizoso
Contributors
Muhammad Ali hi@muhammadali.io
- 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