loading...
Cover image for react-monetize beta is available now 💸

react-monetize beta is available now 💸

guidovizoso profile image Guido Vizoso ・1 min read

react-monetize (3 Part Series)

1) Announcing react-monetize ⚛️ 2) react-monetize beta is available now 💸 3) react-monetize submition 💸

Hi everyone!

Recently I made a post about react-monetize and what I'm trying to achieve. Today I reached a working MVP and I'd love to share it with you to receive feedback, contributions, ideas or whatever you like.

What is react-monetize?

It's a set of helpers and hooks to easily integrate the new Web Monetization API in your React project.

Can I use it on SSR?

It's been tested on standalone React, Create React App and Next.js. Further using is required to see if it works on Gatsby, Preact and other frameworks.

What technologies is it built on?

Currently Typescript, React (>=16.8) and Rollup. ESLint, Prettier and Jest are coming soon!

How can I use it?

Installation, usage information and examples can be found on the Github repo:

GitHub logo guidovizoso / react-monetize

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

💸

react-monetize

Version License: MIT Twitter: guido\_vizoso

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

Install

Currently supports React, Create React App and Next.Js Not yet testd in Gatsby or Preact.

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

import { MonetizeProvider } from 'react-monetize'
function App() {
  return (
    <MonetizePovider paymentPointer="myPaymentPointer">
      <YourApp />
    </MonetizeProvider>
  )
}
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.

import { useStatus } from 'react-monetize'
function Component() {
  const { state, events } = useStatus();

  return (
    <>
      <p>State: {state}

Final thoughts

Please feel free to leave a comment or reach out to me on Twitter.

Hope you like it and have a good week!

react-monetize (3 Part Series)

1) Announcing react-monetize ⚛️ 2) react-monetize beta is available now 💸 3) react-monetize submition 💸

Posted on by:

guidovizoso profile

Guido Vizoso

@guidovizoso

Front end dev. Javascript enthusiast.

Discussion

markdown guide