https://github.com/guidovizoso/react-monetize

Helpers and hooks to speed up your integration with Web Monetization API
https://github.com/guidovizoso/react-monetize

Last synced: 3 months ago
JSON representation

Helpers and hooks to speed up your integration with Web Monetization API

• Host: GitHub
• URL: https://github.com/guidovizoso/react-monetize
• Owner: guidovizoso
• Created: 2020-05-12T16:34:11.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-02-02T20:05:04.000Z (about 1 year ago)
• Last Synced: 2024-11-11T22:43:59.952Z (3 months ago)
• Language: TypeScript
• Homepage: https://react-monetize.now.sh
• Size: 1.39 MB
• Stars: 32
• Watchers: 2
• Forks: 4
• Open Issues: 25
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-web-monetization - react-monetize - Helpers and hooks to speed up your integration with Web Monetization API.  (Resources / Packages)

README

        




react-monetize

Helpers and hooks to speed up your integration with Web Monetization API

react-monetize.now.sh






![Version](https://img.shields.io/badge/version-1.0.0-blue.svg?cacheSeconds=2592000)

![CI](https://github.com/guidovizoso/react-monetize/workflows/CI/badge.svg?tag=1.0.0-rc.6)

![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)

![npm](https://img.shields.io/npm/dt/react-monetize?label=npm%20downloads)







## Install

Currently supports React, Create React App, Next Js and Gatsby (through [gatsby-plugin-monetization](https://github.com/mrmuhammadali/gatsby-plugin-monetization)).

Not yet tested in Gatsby or Preact. Not yet tested in Preact.

```sh

yarn add react-monetize

```

## Usage

Wrap your app with the `MonetizeProvider` and add your payment pointer.

> You can read how to get one here: https://webmonetization.org/docs/receiving

```javascript

import { MonetizeProvider } from 'react-monetize';

function App() {

    return (

        

            

        

    );

}

export default App;

```

Now you have two hooks available to use anywhere in your app:

### useStatus

**State** is the current state provided by Web Monetization API according to this [list](https://webmonetization.org/docs/api#states).

**Events** are the payment events registered stored as `CustomEvent`.

```javascript

import { useStatus } from 'react-monetize';

function Component() {

    const { state, events } = useStatus();

    return (

        <>

            
State: {state}

            


                {events.map((e) => (

                    
{`${e.detail.amount} ${e.detail.assetCode}`}

                ))}

            

        >

    );

}


export default Component;

```

### useContent

Provides a boolean that indicates if the user has provided a payment or not so you can choose to show paid content.

```javascript

import { useContent } from 'react-monetize';

function MonetizedContent() {

    const { isMonetized } = useContent();

    return (

        

            {isMonetized ? 
My premium content
 : 
You need to subscribe to access premium content
}

        

    );

}


export default MonetizedContent;

```

## Contribute

Clone and then:

```sh

cd react-monetize

yarn

yarn build

cd examples/next-js

yarn

yarn dev

```

Develop.

## WIP

-   Improve documentation code and details.

-   Add documentation project to the library code.

## Future changes

-   Remove global declaration for document once the property is added to DOM types.

-   _Monetization UI?_

## Author

👤 **Guido Vizoso **

-   Twitter: [@guido_vizoso](https://twitter.com/guido_vizoso)

-   Github: [@guidovizoso](https://github.com/guidovizoso)

-   LinkedIn: [@guidovizoso](https://linkedin.com/in/guidovizoso)

## Contributors

👤 **Muhammad Ali **

-   Twitter: [@muhammadali_io](https://twitter.com/muhammadali_io)

-   Github: [@mrmuhammadali](https://github.com/mrmuhammadali)

## Related projects

-   Sharafian's approach: https://github.com/sharafian/react-web-monetization

-   jkga's vanilla: https://github.com/jkga/is-web-monetized

-   sorxrob's Svelte project: https://github.com/sorxrob/svelte-monetization

## Show your support

Give a ⭐️ if this project helped you!

---

_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_