Welcome to react-monetize
It's a set of hooks and helpers to get you nice and fast with the new web-monetization-api.
Motivation
This project is a runner up for the GLTW & dev.to hackaton.
Up and running
Install
You can use yarn or npm.
yarn add react-monetize
Configure the MonetizeProvider
Import MonetizeProvider, wrapp your App and give it a paymentPointer
.
You can learn more about payment pointers here: https://webmonetization.org/#providers
import { MonetizeProvider } from 'react-monetize';
function App() {
return (
<MonetizeProvider paymentPointer="myPaymentPointer">
<YourApp />
</MonetizeProvider>
);
}
export default App;
Use the hooks!
Now you can import the monetization hooks to take advantage of the API.
useStatus
gives you the current monetization state and the payment events.useContent
provides an easy way to show your users your premium content.
import { useStatus, useContent } from 'react-monetize';
function Component() {
const { state, events } = useStatus();
const { isMonetized } = useContent();
return (
<>
<p>State: {state}</p>
<p>{JSON.stringify({ events })}</p>
{isMonetized ? <p>Premium</p> : <p>Not</p>}
</>
);
}
export default Component;
Live example
You can safely copy and paste this if that's what you've come for. It'll just work.
State:
- Events:
You need to subscribe get access
import { MonetizeProvider, useStatus, useContent } from 'react-monetize';
function MyApp() {
const { state, events } = useStatus();
const { isMonetized } = useContent();
return (
<div>
<p>State: <b>{state}</b></p>
<ul>
{events.map((evt) => (
<li key={evt.timeStamp}>
<b>({evt.detail.assetCode}</b>
<b>{evt.detail.amount})</b>
</li>
))}
</ul>
{isMonetized ? <span>Thank you 💚</span> : <span>You need to subscribe get access</span>}
<button onClick={monetize}>Add (fake) payment</button>
</div>
);
}
function LiveDemo() {
return (
<MonetizeProvider paymentPointer="myPaymentPointer">
<MyApp />
</MonetizeProvider>
);
}