react-web-monetization-ui for the GftW Hackathon
#gftwhackathon#webmonetization
Eka

Eka @ekafyi

About: Web developer, late bloomer. Can center an element with grace and style (pun intended). Mostly sensible (citation needed).

Location:
Yogyakarta, Indonesia
Joined:
May 2, 2018

react-web-monetization-ui for the GftW Hackathon

Publish Date: May 31 '20
8 0

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

GitHub logo ekafyi / react-web-monetization-ui

Handy UI components to use with the Web Monetization API in React

react-web-monetization-ui

NPM JavaScript Style Guide

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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…

View on GitHub

How I built it

I described it in detail in yesterday’s post.

ekafyi

Published my first React component library, react-web-monetization-ui!

Eka ・ May 30 '20

#gftwhackathon #webmonetization #showdev #react

Additional Resources/Info

Comments 0 total

    Add comment