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 component)
• React (function component)
• Vue.js
• Other examples

React (class component)

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>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyApp/>);

React (function component)

const PushSubscriptionButton = () => {
  const [subscribed, setSubscribed] = useState(null);

  useEffect(() => {
    pushpad('status', (isSubscribed) => {
      setSubscribed(isSubscribed);
    });
  }, []);

  const subscribe = () => {
    pushpad('subscribe', (isSubscribed) => {
      if (isSubscribed) {
        setSubscribed(true);
      } else {
        alert('Notifications are blocked from browser preferences.');
      }
    });
  };

  const unsubscribe = () => {
    pushpad('unsubscribe', () => {
      setSubscribed(false);
    });
  };

  if (subscribed == null) {
    return null;
  }

  return subscribed ? (
    <button onClick={unsubscribe} style={{ color: 'white', background: 'gray' }}>
      Subscribed
    </button>
  ) : (
    <button onClick={subscribe} style={{ color: 'white', background: 'red' }}>
      Subscribe
    </button>
  );
};

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

const root = ReactDOM.createRoot(document.getElementById('root'));
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.