react-web-monetization-ui
This package provides quick customizable UI components for common Web Monetization needs based on existing functionalities in react-web-monetization. As such, make sure you install it as well.
If you already created UI components using the react-web-monetization hook or need specific functionalities (for example passing further props with the Web Monetization state 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-monetizationRun example with create-react-app:
git clone https://github.com/ekafyi/react-web-monetization-uicd react-web-monetization-ui/examplenpm 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 Monetization Quick Start Guide:
<!-- title, other metadata, other content... --> You can add the metadata in public/index.html in most React projects, or you can use libraries like react-helmet. If you use libraries like Gatsby or Next, check their documentation to find the best place to add your metadata.
Currently this package consists of two components: WebMonetizedStatus and WebMonetizedPaywall.
1. WebMonetizedStatus
Display different content depending on whether user has Web Monetization enabled and running (= active) or not.
Usage
;; const MyComponent = <> /* Basic usage */ <WebMonetizedStatus /> /* Custom props */ <WebMonetizedStatus active='Web Monetization is active' inactive='Web Monetization is inactive' /> <WebMonetizedStatus active=<strong>Web Monetization is active</strong> inactive=<span>Web Monetization is not active</span> /> </>;- Comes with CSS class names for quick styling:
rwmui-ms,rwmui-ms--monetized, andrwmui-ms--not-monetized. - By default, this component has
aria-live="polite"attribute for accessibility, which you can override in the props.
Props
- loading (optional)
string | element- What to show while checking for Web Monetization status.
- Default:
Loading...
- active (optional)
string | element- What to show if Web Monetization is active (running).
- Default:
💲 Web Monetization is active
- inactive (optional)
string | element- What to show if Web Monetization is inactive (stopped, pending, not available).
- Default:
Web Monetization is not active
2. WebMonetizedPaywall
Display “paywall” content (eg. description and call-to-action) users without active Web Monetization.
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.
Usage
// This example uses WebMonetizedPaywall together with react-web-monetization's `IfWebMonetized` component;;; const MyComponent = <> /* Example 1 - basic */ <WebMonetizedPaywall /> /* Example 2 - custom props */ <WebMonetizedPaywall title="Sorry, you cannot see this content" body="Want to know the answer to the ultimate question of life, the universe, and everything? Enable Web Monetization now." /> /* Example 3 - custom content as children */ <WebMonetizedPaywall> With <a href='https://coil.com'>a flat rate subscription</a> you can support this site get exclusive content and explore lots of other interesting Web Monetized content </WebMonetizedPaywall> /* This is the content displayed to web monetized users */ <IfWebMonetized> The answer to the ultimate question of life the universe and everything is <strong>42</strong> </IfWebMonetized> </>;- Comes with CSS class name
rwmui-paywallfor quick styling. - By default, this component has
aria-live="polite"attribute for accessibility, which you can override in the props.
Props
- children
node- Display content to non web monetized users. If this prop exists, it will be rendered instead of other props.
- bgColor (optional)
string- Background color of message to non web monetized users. Will be ignored if
childrenis supplied. - Default:
hsla(0, 0%, 0%, 0.05)
- title (optional)
element- Heading title of message to non web monetized users. Will be ignored if
childrenis supplied. - Default:
⛔️ This content is available for web monetized users
- body (optional)
element- Subtitle/body message to non web monetized users. Will be ignored if
childrenis supplied. - Default:
<>Support this site to get access to this content and <em>all web monetized content everywhere on the internet</em> with strong privacy protection for USD 5 per month.</>
- cta (optional)
element- Call-to-action link to non web monetized users. Will be ignored if
childrenis supplied. - Default:
<a href='https://coil.com/' rel='external'>Enable with Coil</a>
License
MIT © ekafyi