https://github.com/dacioromero/react-hook-wm
React hooks for integrating with Web Monetization.
https://github.com/dacioromero/react-hook-wm
react react-hooks web-monetization
Last synced: 6 months ago
JSON representation
React hooks for integrating with Web Monetization.
- Host: GitHub
- URL: https://github.com/dacioromero/react-hook-wm
- Owner: dacioromero
- License: mit
- Created: 2019-11-22T08:32:11.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T05:15:55.000Z (over 2 years ago)
- Last Synced: 2025-04-19T22:16:58.691Z (7 months ago)
- Topics: react, react-hooks, web-monetization
- Language: TypeScript
- Homepage:
- Size: 724 KB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-web-monetization - react-hook-wm - React hooks for integrating with Web Monetization.  (Resources / Packages)
README
# React Hook WM
Hooks for integrating React with [Web Monetization](https://webmonetization.org/).
[](https://bundlephobia.com/result?p=react-hook-wm)
[](https://www.npmjs.com/package/react-hook-wm)
[](https://github.com/dacioromero/react-hook-wm/blob/master/LICENSE)
[](https://github.com/dacioromero/react-hook-wm/search?l=typescript)
[](https://github.com/dacioromero/react-hook-wm/actions?query=branch%3Amaster)
[](https://codecov.io/gh/dacioromero/react-hook-wm)
## 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](https://webmonetization.org/docs/api#states).
### 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:
```typescript
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](#useListener) and returns the state produced. See the [source for useCounter](src/counter.ts) or the [source for useHasPaid](src/has-paid.ts) for examples.
### useCounter
Returns the last assetCode (code) and the sum of the amounts (total) received from [`monetizationprogress`](https://webmonetization.org/docs/api#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`.
## Other Works
- [react-web-monetization](https://github.com/sharafian/react-web-monetization)
[monetization event]: https://webmonetization.org/docs/api#browser
[usecounter]: #useCounter
[usecountercontext]: #useCounterContext
[usehaspaid]: #useHasPaid
[usehaspaidcontext]: #useHasPaidContext
[counterprovider]: #CounterProvider
[haspaidprovider]: #HasPaidProvider