DEV Community

Eka
Eka

Posted on • Updated on

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

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

I wanted to create something for the Grant for the Web Hackathon but I only have today and tomorrow to do it. I decided to take it easy and just learn how the Web Monetization API works out of curiousity—even if I couldn’t finish a project, at least I’ll be learning something new!

I spent half the day just reading articles and browsing existing projects. In addition to the documentation, the content that made it click for me were the series of posts by Emma Goto and the React Web Monetization library by Ben Sharafian.

GitHub logo sharafian / react-web-monetization

React component that lets you access the state of Web Monetization

When I was copy-pasting implementing and modifying code from Emma’s posts using the hook from react-web-monetization in a test site, I got the idea to publish my UI components in a package. With a published package, I can reuse the components in different apps more easily. Additionally, I have never made a React component library before—yet another fun new thing to learn 😎. Hence… this package.

What is this / what does it do?

react-web-monetization-ui is a miniscule UI component library for React based on react-web-monetization✻, currently consisting of two components.

This library provides quick, concise, customizable UI components for common Web Monetization use cases.

The first component, WebMonetizedStatus, shows different content depending on whether user has Web Monetization enabled and running (= active) or not.

// Basic example
import { WebMonetizedStatus } from 'react-web-monetization-ui';
const MyComponent = () => (
  <>
    <div>some other content...</div>
    <WebMonetizedStatus />
  </>
);
Enter fullscreen mode Exit fullscreen mode

The second component, WebMonetizedPaywall, displays a “paywall” containing a call-to-action for non-web monetized users. You most likely want to pair this with react-web-monetization’s IfWebMonetized component (which does the opposite: render exclusive content for web monetized users). Note that you don’t need to wrap the paywall component in IfNotWebMonetized as it’s already been done for you.

// Basic example
import { WebMonetizedPaywall } from 'react-web-monetization-ui';
import { IfWebMonetized } from 'react-web-monetization';
const MyComponent = () => (
  <>
    <h1>Super Useful Article</h1>
    <WebMonetizedPaywall />
    <IfWebMonetized>
      Web Monetized-only article content here...
    </IfWebMonetized>
  </>
);
Enter fullscreen mode Exit fullscreen mode

[✻] react-web-monetization is a peer dependency, not a dependency tied to this library. You can use react-web-monetization on its own and remove react-web-monetization-ui if you don’t use the latter.

Who is it for?

React developers and designers who…

  • want to try the Web Monetization API quickly (add <WebMonetizatizedStatus />, you’re good to go)
  • need a reusable UI component but don’t have time to create one
  • want to focus on styling and copywriting (for example when used in an MDX-based site)

Where can this be used?

Anywhere you can use React components, for example:

  • create-react-app sites (example in the repo)
  • Gatsby sites
  • ❓ Next sites (not tested)

Example in a Gatsby site:

Comparison of two Gatsby sites created from the official blog starter, one shows active monetization status and the other shows inactive status

Basic WebMonetizedStatus component example

Comparison of two Gatsby sites created from the official blog starter, one shows exclusive content for monetized users and the other shows call to action with a link to Coil website

Basic WebMonetizedPaywall component example (left screen)

How do we use it?

The examples are still a work in progress. I have provided basic documentation in the repo’s readme; tomorrow I’m going to create a live CodeSandbox with examples for:

Check out and try the live examples in the CodeSandbox, which contains example for:

  • unstyled
  • CSS module
  • Styled Components
  • Theme UI
  • [TODO] Tailwind

That’s all for now!

Top comments (2)

Collapse
 
emma profile image
Emma Goto 🍙

Nice work! This stuff is gonna be super useful as web monetization grows, if everyone has a consistent explanation on their site of what it is, I think it will get the message out there quicker 🙂

Collapse
 
ekafyi profile image
Eka

Thank you Emma!