What I built
react-monetize
is a set of helpers and hook to easily integrate the Web Monetization API with React.
Submission Category: Foundational Technology
Demo
Demo and code can be found on the documentation website:
https://react-monetize.now.sh/#live-example
Link to Code
guidovizoso / react-monetize
Helpers and hooks to speed up your integration with Web Monetization API
react-monetize
Helpers and hooks to speed up your integration with Web Monetization API
react-monetize.now.shInstall
Currently supports React, Create React App and Next Js Not yet tested in Gatsby or Preact.
yarn add react-monetize
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
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:
useStatus
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()
…How I built it
First thing I did was heading to https://webmonetization.org and read the documentation.
With that knowledge in mind I prepared the layout for creating the components.
The goal was to make it as React as possible so people could use the benefits of the Web Monetization API without having to worry about integration. Just wrap your App, add your payment pointer and you're good to go.
Once you prepared your App you'll have access to useStatus
and useContent
to build with the API.
react-monetize
uses these technologies:
- Typescript.
- Rollup for the bundling.
- React (obviusly).
- React Testing Library & Jest for testing.
- ESLint & Prettier to ensure code quality.
Additional Resources/Info
- Website: https://react-monetize.now.sh
- As for this moment it has over 700 downloads on npm and is powering projects like Money Chat and gatsby-plugin-monetization.
- Coil, the pioneers on Web Monetization, are considering using the library. (will update the post if that happens)
Hope you liked the project and feel free to comment, make a PR, fork it or use it in your own idea!
Stay safe and have a great week!
Top comments (2)
Thanks Guido. I am enjoying your library.
Glad you like it and thanks again for spotting that issue!