What I built
React library that provides quick, customizable UI components for common Web Monetization use cases, such as displaying monetization status and displaying a paywall with a description and a call-to-action.
Submission Category:
Foundational Technology
Demo
This CodeSandbox shows examples of components without custom styling and props, with common styling methods (CSS modules, Styled Components, Theme UI), and with customized content through props.
Link to Code
ekafyi
/
react-web-monetization-ui
Handy UI components to use with the Web Monetization API in React
react-web-monetization-ui
This package provides quick customizable UI components for implementing the Web Monetization API on your React web app/site.
This package uses functionalities from the react-web-monetization package, which you also need to install as a peer dependency. If you have created your UI components using the react-web-monetization hook or need specific functionalities (for example passing further props with the monetization state as boolean value), this package may not be of use to you.
Install
# with npm
npm install --save react-web-monetization-ui react-web-monetization
# ...or with yarn
yarn add react-web-monetization-ui react-web-monetization
Run example with create-react-app:
git clone https://github.com/ekafyi/react-web-monetization-ui
cd react-web-monetization-ui/example
npm install # or yarn
npm start # or yarn start
# The web app will run at http://localhost:3000
Usage
To enable Web Monetization, you have to add meta tag containing your payment pointer to the HTML head of your app template. Example from Web…
How I built it
I described it in detail in yesterday’s post.
Additional Resources/Info
- Gatsby demo site using Gatsby's official blog theme starter: https://github.com/ekafyi/gatsby-blog-react-web-monetization-ui
Top comments (0)