# with npm
npm install --save react-web-monetization-ui react-web-monetization
# ...or with yarn
yarn add react-web-monetization-ui react-web-monetization

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

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 ・ 5 min read

#gftwhackathon #webmonetization #gatsby

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:

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!