React Monetization

• What is this?
• Installation
• Usage
  • WebMonetizationProvider
  • useWebMonetization

A React library for tracking Web Monetization state in your app.

npm install @interruptor/react-monetization

First, you need to wrap your application with the WebMonetizationProvider. This sets up the event listeners needed for tracking web monetization events.

const MyApp = ({ children }) => {
  return <WebMonetizationProvider>{children}</WebMonetizationProvider>
}

The useWebMonetization hook provides information about the current Web Monetization state, whether it's "pending", "started" or "stopped". For convenience, there's also an isActive property, for knowing whether it's on or off.

const MyComponent = () => {
  const monetization = useWebMonetization()

  if (monetization.isActive) {
    return <p>Web Monetization is enabled! 🎉</p>
  }

  return <p>It's off</p>
}

⚠️ The hook will throw an error if used outside of the WebMonetizationProvider