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

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.

• Introductory post on DEV
• CodeSandbox Demo

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…

View on GitHub

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.

Setting up web monetization on your Gatsby blog (with RSS)

Emma Goto 🍙 ・ May 26 '20

#gftwhackathon #webmonetization #gatsby

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 />
  </>
);

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>
  </>
);

[✻] 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
  • UPDATE: I made a Gatsby theme and a starter to help you get started quickly.
• ❓ Next sites (not tested)

Example in a Gatsby site:

Basic WebMonetizedStatus component example

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!

Comments

[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 🙂

[Eka]

Thank you Emma!