Awesome
React Hook WM
Hooks for integrating React with Web Monetization.
Maintenance notice
As I am no longer an employee of Coil, this repo will likely no longer be maintained. If you'd like to maintain this repo please leave an issue.
Install
$ npm install react-hook-wm
or
$ yarn add react-hook-wm
Hooks
useStatus
Returns the current monetization state.
usePaymentPointer
Returns the latest paymentPointer/requestId received from any monetization event.
useRequestId
Returns the latest paymentPointer/requestId received from any monetization event.
useListener
Exposes a more React-ish way of interacting with monetization events through the following interface:
interface UseListenerOptions {
onPending?: (event: MonetizationPendingEvent) => void
onStart?: (event: MonetizationStartEvent) => void
onProgress?: (event: MonetizationProgressEvent) => void
onStop?: (event: MonetizationStopEvent) => void
}
useReducedListener
Attaches the provided reducer to events from useListener and returns the state produced. See the source for useCounter or the source for useHasPaid for examples.
useCounter
Returns the last assetCode (code) and the sum of the amounts (total) received from monetizationprogress events.
useCounterContext
Alternative to useCounter that requires a CounterProvider in one of its parent components. Allows for tracking prior to using the hook.
useHasPaid
Returns a Boolean indicating whether or not the payment pointer has been paid yet. Useful for determining requesting for pay-locked content is ready.
useHasPaidContext
Alternative to useHasPaid that requires a HasPaidProvider in one of its parent components. Allows for tracking prior to using the hook.
Components
CounterProvider
Provides useCounterContext's value. It's recommended that its children are memoized using React.memo.
HasPaidProvider
Provides useHasPaidContext's value. It's recommended that its children are memoized using React.memo.