React Push Notifications

Setting up push notifications for your React website is easy. Web push notifications are the ideal solution to re-engage users and bring them back to your website.

Estimated setup time: 10 minutes.

📘
If you haven't already, please follow the Website Quickstart guide before setting up React with this guide.

This guide will show you how to use the Website SDK from your React application.

Prerequisites

A WonderPush Account, if you do not already have one
Your WonderPush credentials available in your dashboard:
- YOUR_WEB_KEY
  Where to get your Web key
A desktop with Google chrome installed

1. Installing

You can install the module from a package manager of your choice directly from the command line:

# Yarn
yarn add react-wonderpush

# NPM
npm i react-wonderpush

2. In your application

Remove the snippet you've installed during the Quickstart guide if you have followed it, and replace it with the following (adapt YOUR_WEBKEY):

import { WonderPush } from 'react-wonderpush';

function App() {
  return (
    // Wrap your app with our WonderPush component
    <WonderPush options = {{webKey: "YOUR_WEBKEY"}}>
      <div className="App">
        Your components here ...
      </div>
    </WonderPush>
  );
}

3. In your components

Here is how to integrate a wonderpush subscription switch:

import React,{Component} from 'react';

const SwitchButton = () => (
    <div className="switch-container">
      <div id="wonderpush-subscription-switch" data-on="YES" data-off="NO"></div>
    </div>
  )

export default SwitchButton

And here is how to create a component who uses the WonderPush SDK:

import React, {Component} from 'react'
import {withWonderPush} from 'react-wonderpush'

export class EventToTrack extends Component {
  constructor(props){
    super(props)
    this.fireEvent = this.fireEvent.bind(this)
  }

  fireEvent(e){
    this.props.wonderPush.trackEvent("myEvent")
  }

  render(){
    return (
      <div 
        className={"event myEvent"} 
        onClick={this.fireEvent} 
      > 
        Click on this div will track event name myEvent
      </div>
    )
  }
}

export default withWonderPush(EventToTrack, {waitWonderPushReady: true})

withWonderPush() take two arguments:

component
options

Available options:

waitWonderPushReady: boolean (default : false)

👍
Congratulations, you're done!

📘

Prerequisites

1. Installing

2. In your application

3. In your components

👍Congratulations, you're done!

👍
Congratulations, you're done!