Published my first React component library, react-web-monetization-ui!
Tags: gftwhackathon, webmonetization, showdev, react
Published: 2020-05-30 19:19:33

{% github ekafyi/react-web-monetization-ui %}

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.

{% post emma/setting-up-web-monetization-on-your-gatsby-blog-with-rss-dgp %}

{% github sharafian/react-web-monetization no-readme %}

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](https://github.com/ekafyi/react-web-monetization-ui) is a _miniscule_ UI component library for React based on [react-web-monetization](https://github.com/sharafian/react-web-monetization)✻, currently consisting of two components.

This library provides _quick, concise, customizable UI components_ for common Web Monetization use cases. 

{% codesandbox react-web-monetization-ui-examples-5r1ck %}

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

```js
// 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.

```js
// 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](https://github.com/ekafyi/react-web-monetization-ui/tree/master/example) in the repo)
- Gatsby sites
  - UPDATE: I made a [Gatsby theme](https://github.com/ekafyi/gatsby-theme-web-monetization) and a [starter](https://github.com/ekafyi/starter-web-monetization-theme) to help you get started quickly.
- ❓ 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](https://dev-to-uploads.s3.amazonaws.com/i/uhvk5tkjzydcyeosvsp3.png)
<figcaption>Basic WebMonetizedStatus component example</figcaption>

![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](https://dev-to-uploads.s3.amazonaws.com/i/50tiykbmo404kxjxuhub.png)
<figcaption>Basic WebMonetizedPaywall component example (left screen)</figcaption>

## 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](https://codesandbox.io/s/react-web-monetization-ui-examples-5r1ck), which contains example for:

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

That’s all for now!