Web push notifications with React, Vue.js or other frontend frameworks

The JavaScript SDK is written in plain JavaScript and works well with any frontend framework.

It's also easy to build custom components: for example in this tutorial we'll show how to create a simple subscribe / unsubscribe button for push notifications using React or Vue.js.

The following examples assume that you have already installed Pushpad and the frontend framework.

React

class PushSubscriptionButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { subscribed: null };
    this.subscribe = this.subscribe.bind(this);
    this.unsubscribe = this.unsubscribe.bind(this);
  }

  componentDidMount() {
    pushpad('status', (isSubscribed, tags, uid) => {
      this.setState({ subscribed: isSubscribed });
    });
  }
  
  subscribe() {
    pushpad('subscribe', (isSubscribed) => { 
      if (isSubscribed) {
        this.setState({ subscribed: true });
      } else {
        alert('Notifications are blocked from browser preferences.');
      }
    });
  }
  
  unsubscribe() {
    pushpad('unsubscribe', () => {
      this.setState({ subscribed: false });
    });
  }

  render() {
    if (this.state.subscribed == null) {
      return null;
    }
    if (this.state.subscribed) {
      return (
        <button onClick={this.unsubscribe} style={{color: "white", background: "gray"}}>
          Subscribed
        </button>
      );
    }
    return (
      <button onClick={this.subscribe} style={{color: "white", background: "red"}}>
        Subscribe
      </button>
    );
  }
}

class MyApp extends React.Component {
  render() {
    return (
      <div>
        <h1>Stay updated!</h1>
        <p>We'll send you a notification when we publish something new.</p>
        <PushSubscriptionButton/>
      </div>
    );
  }
}

root.render(<MyApp/>);

Vue.js

const PushSubscriptionButton = {
  data() {
    return { subscribed: null };
  },
  methods: {
    subscribe() {
      pushpad("subscribe", isSubscribed => {
        if (isSubscribed) {
          this.subscribed = true;
        } else {
          alert("Notifications are blocked from browser preferences.");
        }
      });
    },
    unsubscribe() {
      pushpad("unsubscribe", () => {
        this.subscribed = false;
      });
    }
  },
  created() {
    pushpad("status", (isSubscribed, tags, uid) => {
      this.subscribed = isSubscribed;
    });
  },
  template: `
    <button v-if="subscribed !== null" @click="subscribed ? unsubscribe() : subscribe()">
      {{ subscribed ? "You are subscribed" : "Subscribe" }}
    </button>
  `
};

Vue.createApp().component("push-subscription-button", PushSubscriptionButton).mount('#app');

<div id="app">
  <h1>Stay updated!</h1>
  <p>We'll send you a notification when we publish something new.</p>
  <push-subscription-button/>
</div>

Other examples

You can easily adapt the examples to any other framework or build more complex components based on your needs.

See also the examples in plain JavaScript and the Javascript SDK reference.