How to integrate in react.js app

In this section, we are going to tell you that how to integrate https://pushmarket.io with React.js

follow these steps:

Install the package using npm or yarn

npm


npm install @presswink/pushmarket.io

yarn


yarn add @presswink/pushmarket.io

Import it in your app


import { PushMarket } from '@presswink/pushmarket.io'

Add the PushMarket component to your app below all tags in root file. Please replace {{your-project-id}} with your project id


<PushMarket projectId="{{your-project-id}}" />

Create a new javascript file

Create a new javascript file, called sw.js in the public folder and add the following code to it.

/public/sw.js


importScripts("https://pushmarket.io/sdk/service-worker.js")

Example:

Example

app.js


import React from "react";
import Display from "./Display";
import ButtonPanel from "./ButtonPanel";
import calculate from "../logic/calculate";
import "./App.css";
import { PushMarket } from '@presswink/pushmarket.io'
 
export default class App extends React.Component {
  state = {
    total: null,
    next: null,
    operation: null,
  };
 
  handleClick = buttonName => {
    this.setState(calculate(this.state, buttonName));
  };
 
  render() {
    return (
      <div className="component-app">
        <Display value={this.state.next || this.state.total || "0"} />
        <ButtonPanel clickHandler={this.handleClick} />
        
        // pushmarket code here
        <PushMarket projectId="your-project-id" />
      </div>
    );
  }
}