React Web Monetization

> React module that lets you access the state of Web Monetization

Examples

This repo contains several usage examples in example/. To host the site and
view the examples, run:

``
cd example
npm install
npm start
`

Then go to http://localhost:3000.

Usage

$3

You will still need to insert the Web Monetization meta tag into your
document's . This should be done in the HTML file that react renders
into, not in React.

For a specification of this meta tag, see Interledger RFC
0028

$3

This hook will update when the first web-monetization micropayment occurs on the page and the state goes from pending to started.

`jsx
import React from 'react'
import { useMonetizationState } from 'react-web-monetization'

const MyMessage = props => {
const monetization = useMonetizationState()

return


{monetization.state === 'stopped' && 'Stopped'}
{monetization.state === 'pending' && 'Loading...'}
{monetization.state === 'started' && 'Thanks for supporting our site!'}
{!monetization.state && 'Sign up for Coil to support our site!'}


}

export default MyMessage
`

$3

This hook will update on each web-monetization micropayment that occurs. It
tracks a running total for how much has been paid out to the page.

You should only use this hook if you're updating on every micropayment. If you
only need a boolean on whether or not payment is happening, use
useMonetizationState

`jsx
import React from 'react'
import { useMonetizationCounter } from 'react-web-monetization'

const MyCounter = props => {
const monetization = useMonetizationCounter()

return


{(monetization.totalAmount / (10 ** monetization.assetScale)).toFixed(monetization.assetScale)}
{monetization.assetCode}


}

export default MyCounter
`

$3

Web Monetization Conditional Components allow you to wrap react components so
that they display if Web Monetization is enabled/disabled/pending.

They're intended for simple situations where you don't want to write the same
code using hooks over and over. Their functionality can easily be replicated by
using the Web Monetization State hook.

See an example of their usage here.

`jsx
import React from 'react'
import { IfWebMonetized } from 'react-web-monetization'

const MyMessage = props => {
return


Thanks for supporting me!



}
`

`jsx
import React from 'react'
import { IfNotWebMonetized } from 'react-web-monetization'

const MyMessage = props => {
return


Please support me with Web Monetization!



}
`

$3

Sometimes you don't load in any monetization hooks at page load, but you want
to start listening for web monetization events anyways. You can use the
initGlobalWebMonetizationState function to force the module to start
listening for global web monetization events.

`jsx
import React from 'react'
import { initGlobalWebMonetizationState } from 'react-web-monetization'

initGlobalWebMonetizationState()
``