DEV Community: Guido Vizoso

react-monetize submition 💸

Guido Vizoso — Thu, 21 May 2020 14:20:31 +0000

What I built

react-monetize is a set of helpers and hook to easily integrate the Web Monetization API with React.

Submission Category: Foundational Technology

Demo

Demo and code can be found on the documentation website:
https://react-monetize.now.sh/#live-example

Link to Code

guidovizoso / react-monetize

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

react-monetize

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

react-monetize.now.sh

Install

Currently supports React, Create React App and Next Js Not yet tested 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.

Events are the payment events registered stored as CustomEvent.

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

…

View on GitHub

How I built it

First thing I did was heading to https://webmonetization.org and read the documentation.
With that knowledge in mind I prepared the layout for creating the components.
The goal was to make it as React as possible so people could use the benefits of the Web Monetization API without having to worry about integration. Just wrap your App, add your payment pointer and you're good to go.
Once you prepared your App you'll have access to useStatusand useContent to build with the API.

react-monetize uses these technologies:

Typescript.
Rollup for the bundling.
React (obviusly).
React Testing Library & Jest for testing.
ESLint & Prettier to ensure code quality.

Additional Resources/Info

Website: https://react-monetize.now.sh
As for this moment it has over 700 downloads on npm and is powering projects like Money Chat and gatsby-plugin-monetization.
Coil, the pioneers on Web Monetization, are considering using the library. (will update the post if that happens)

Hope you liked the project and feel free to comment, make a PR, fork it or use it in your own idea!
Stay safe and have a great week!

react-monetize beta is available now 💸

Guido Vizoso — Tue, 12 May 2020 17:07:14 +0000

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:

guidovizoso / react-monetize

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

💸

react-monetize

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}

…

View on GitHub

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!

Announcing react-monetize ⚛️

Guido Vizoso — Mon, 11 May 2020 17:22:19 +0000

Why re-invent the wheel everytime?
If there's something we as React devs love is the infinite and ever expanding ecosystem of tools and packages at our disposal.

The GFTW Hackaton provided a unique opportunity to add our grain of sand to the community and build something to help future users of the web monetization api. That's why I'm building react-monetize 💸.

What is it about?

It's a set of helpers to speed up development time and integrate easily with the new Web Monetization Api.

Is there a mission

Yes. It has to be easy to use, performant and must support React and Next.js.

Prototype

To use react-monetize you'll have to wrap your app in a MonetizeProvider and give it a payment pointer. After that you'll have the data available for you at any time.

import { MonetizeProvider } from 'react-monetize';
function App() {
  return (
    <MonetizeProvider paymentPointer="myPaymentPointer">
      <AppCode />
    </MonetizeProvider>
  );
}
export default App;

Feedback

Please feel free to comment your thoughts about the project and any idea is welcomed.

Have a great week!

React in real life ⚛️ - Simplifying with Context and Hooks

Guido Vizoso — Fri, 10 Jan 2020 15:53:59 +0000

Hi there!

I've been thinking for a while about making a series of post to share some day to day tasks the team and I have been facing. This is the first one.

Not all React apps are the same. Some of them use UI libraries, others doesn't. You can use Next or any SSR, JS or Typescript, REST or GraphQL, and so on. But there's something any of us can't escape and it's state management.

Our site uses a headless CMS to handle dynamic pages and data except for some custom pages with transactional components. This architecture made using Redux a no go because global state wasn't necessary.

The problem

Recently we were assigned a task to develop a custom page that would handle a complex state with user flow, steps, multiple options, statuses and API calls. Using only context would've been a nightmare because it'd have been huge and hard to manage. State per component was also discarded because some things had to be shared between components.

The solution

We came up with an idea to use Context as a global state and custom hooks to populate it via API calls and simplify information to the components.

Step by step of how we did it

1. Our first step is creating our Context

// Context.js

import React, { useState } from "react";

const Context = React.createContext([{}, () => {}]); // Our empty Context ready.

const Provider = props => {
  const [state, setState] = useState({
    userFlow: {...},
    otherData: {...},
    aLotOfData: [...]
  }); // Our context is a state hook ;)
  return <Context.Provider value={[state, setState]}>{props.children}</Context.Provider>;
};

export { Context, Provider };

This Context gives the consumer two values: state, the info, and setState, the method to update that same info.

2. Time to create our custom hooks!

Our goal here is to use the information provided by Context, make the API calls and simplify the data so the components won't have a hard time consuming it.

// hooks/useUserFlowData.js

import { useContext } from "react";
import { Context } from "../Context";

const useUserFlowData = () => {
  const [state, setState] = useContext(Context); // Our values from Context

  const updateData = name => {
    setState(prevState => ({
      ...prevState,
      userFlow: {
        ...userFlow,
        name: name
      }
    }));
  }; // Our methods to update the state

  // Now we return only the relevant part of the state for the component and the method to update it
  return {
    data: state.userFlow,
    updateData
  };
};

export default useUserFlowData;

3. Consuming the hook from the component

We're ready to use our custom hook from our component. Let's get to it!

// components/UserData.js

import React from "react";

import useUserFlowData from "../../hooks/useUserFlowData";

export default () => {
  const { data, updateData } = useUserFlowData(); // Our data and methods

  return (
    <div>
      <span>{data.name}</span>
      <button onClick={() => updateData("New Name")}>Update</button>
    </div>
  );
};

And that's it! Your component is now using a custom hook to get and modify specific data from a huge Context.

Important note: I'm assuming you already have experience with React and Context. Don't forget to wrap your upper most component with the Context Provider

Here's a working example on CodeSandbox:

Conclusion

Thank you very much for scrolling all the way here!

If you like this kind of posts or have any suggestion / idea to improve just let me know.

Also, I'm using Twitter as a dev for the first time so you can follow me at guido_vizoso

Emojiflix - I built a React app to try SVG

Guido Vizoso — Mon, 02 Dec 2019 14:29:22 +0000

Hi reader!

I've been building this simple web app with React over the weekend to see what SVG can do. I'm amazed by how this tech can help us speed development up and the support it has.

This simple website will let you choose from a variety of options to create your own emoji so feel fry to try it.

Here's the url:
https://emojiflix.now.sh

And here you can check the source code:
https://github.com/guidovizoso/emojiflix

Edit: I've added the ability to download your custom emoji as SVG!

Want to give it a look and tell me what do you think about it?

Thanks for reading and have a great week!

React-Redux headstart for busy people

Guido Vizoso — Wed, 30 May 2018 01:51:49 +0000

Hi reader! This is the sequel to my previous post:

React headstart for busy people

Guido Vizoso ・ May 26 '18

#react #boilerplate #javascript #webdev

Motivation

It started as a way to simplify my development process but I figured out it's time to publish and document what I do so... Here we are!

Content

This boilerplate has what I consider the minimun structure for any react-redux application: Wepack, Babel, React, Redux, Styled Components and ESlint.
Github repo: https://github.com/guidovizoso/react-redux-boilerplate

How to use it

Installing:

git clone https://github.com/guidovizoso/react-redux-boilerplate.git
npm install

Commands:

npm run dev /* Runs webpack dev server and live reloading */
npm run start /* Runs webpack in production mode with optimizations */

Done!

Folder structure

├── src
│   ├── index.js // Renders everything
│   ├── App.jsx // Main component
│   ├── store.js // Redux store generator
│   ├── components // Pretty much explains itself
│   ├── actions // Dispatch executers
│   ├── reducers // Redux Reducers
│   └── assets // Images and stuff goes here
├── dist // Compiled files goes here
├── package.json
├── .babelrc
├── .eslintrc
├── webpack.common.js
├── webpack.dev.js
├── webpack.prod.js
└── .gitignore

Issues

If you're using this boilerplate and encounter any issue, please let me know!
https://github.com/guidovizoso/react-redux-boilerplate/isues

Future posts

React & Redux have a steep learning curve, that's for sure. If you want a tutorial about that just comment it out. Have a great day!

React headstart for busy people

Guido Vizoso — Sat, 26 May 2018 23:04:33 +0000

Hi reader! If you're building the same React initial config over and over this may help.

Motivation

It started as a way to simplify my development process but I figured out it's time to publish and document what I do so... Here we are!

Content

This boilerplate has what I consider the minimun structure for any react application: Wepack, Babel, React, Styled Components and ESlint.
Github repo: https://github.com/guidovizoso/react-boilerplate

Variables

Default project > master branch
SASS project > sass branch
PostCSS project > postcss branch

How to use it

Installing:

git clone https://github.com/guidovizoso/react-boilerplate.git
npm install

Commands:

npm run dev /* Runs webpack dev server and live reloading */
npm run start /* Runs webpack in production mode with optimizations */

Done!

Issues

If you're using this boilerplate and encounter any issue, please let me know!
https://github.com/guidovizoso/react-boilerplate/isues

Edit

I've just added SASS and PostCSS support!