What I built
I'm late to the party as I got to know about #gftwhackathon yesterday. Without further ado, I read the docs of Web Monetization API and thought of creating a package for react. But after a bit of digging I found react-monetize and some other packages which were doing the same thing, so I created Gatsby plugin for react-monetize
.
Submission Category:
- Foundational Technology: Gatsby plugin for Web Monetization API
Link to Code
mrmuhammadali / gatsby-plugin-monetization
Gatsby plugin for integration of Web Monetization API
gatsby-plugin-monetization
A Gatsby plugin for react-monetize to speed up your integration with Web Monetization API
Install
yarn add gatsby-plugin-monetization
Or
npm install --save gatsby-plugin-monetization
How to use
You can read how to get your payment pointer on official website of Web Monetization API.
import { useContent, useStatus } from 'gatsby-plugin-monetization';
function MyComponent() {
// ...
const { state, events } = useStatus();
const { isMonetized } = useContent();
// ...
}
./gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-monetization`,
options: {
// [required]
paymentPointer: 'your-payment-pointer',
},
},
],
};
Examples
To setup playground locally, run following commands (without -) in sequence:
- git clone git@github.com:mrmuhammadali/gatsby-plugin-monetization.git
- cd gatsby-plugin-monetization/examples
- yarn install
- yarn start
Author
👤 Muhammad Ali hi@muhammadali.dev
- Twitter: @muhammadali_io
- Github: @mrmuhammadali
react-monetize Author
…
Instructions for setting up example code is given in the docs.
How I built it
Technology Stack:
- React
- Babel
- Gatsby
I learned about Web Monetization API and how it works along the way and it was my first time of creating a plugin for Gatsby.
Additional Resources/Info
I've some ideas to create components necessary for Web Monetization API to integrate in React.
I've also created a PR in official docs of web monetization API to publish this plugin there.
Top comments (0)