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
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:
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;
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;
Clone and then:
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 [email protected]
- Twitter: @guido_vizoso
- Github: @guidovizoso
- LinkedIn: @guidovizoso
👤 Muhammad Ali [email protected]
- 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