Why re-invent the wheel everytime?
If there's something we as React devs love is the infinite and ever expanding ecosystem of tools and packages at our disposal.
The GFTW Hackaton provided a unique opportunity to add our grain of sand to the community and build something to help future users of the web monetization api
. That's why I'm building react-monetize 💸
.
What is it about?
It's a set of helpers to speed up development time and integrate easily with the new Web Monetization Api.
Is there a mission
Yes. It has to be easy to use, performant and must support React and Next.js.
Prototype
To use react-monetize
you'll have to wrap your app in a MonetizeProvider
and give it a payment pointer. After that you'll have the data available for you at any time.
import { MonetizeProvider } from 'react-monetize';
function App() {
return (
<MonetizeProvider paymentPointer="myPaymentPointer">
<AppCode />
</MonetizeProvider>
);
}
export default App;
Feedback
Please feel free to comment your thoughts about the project and any idea is welcomed.
Top comments (4)
You can also check out this repository for some inspiration:
sharafian / react-web-monetization
React component that lets you access the state of Web Monetization
React Web Monetization
Examples
This repo contains several usage examples in
example/
. To host the site and view the examples, run:Then go to
http://localhost:3000
.Usage
Enabling Web Monetization
You will still need to insert the Web Monetization meta tag into your document's
<head>
. This should be done in the HTML file that react renders into, not in React.For a specification of this meta tag, see Interledger RFC 0028
Web Monetization State Hook
This hook will update when the first web-monetization micropayment occurs on the page and the state goes from
pending
tostarted
.Thanks Emma! I've already seen it. Definitely will be listed as a source of inspiration on the repo.
Cool!
Thank you Ben!