Web Push Notification Service for Browsers and PWAs

<script type="module">
  import "https://unpkg.com/@magicbell/webcomponents";
</script>

<mb-context-provider token="${USER_JWT}">
  <mb-webpush-button
    idle-label="enable webpush notifications"
    success-label="disable webpush notifications"
  ></mb-webpush-button>
</mb-context-provider>

import "@magicbell/react/styles/webpush-button.css";
import * as React from "react";
import Provider from "@magicbell/react/context-provider";
import WebPushButton from "@magicbell/react/webpush-button";

function App(props: any) {
  return (
    <Provider token="${USER_JWT}">
      <WebPushButton
        renderLabel={({ status, error }) =>
          error ||
          (status === "success"
            ? "disable webpush notifications"
            : "enable webpush notifications")
        }
      />
    </Provider>
  );
}

export default App;

import "@magicbell/preact/styles/webpush-button.css";
import { h, Fragment } from "preact";
import Provider from "@magicbell/preact/context-provider";
import WebPushButton from "@magicbell/preact/webpush-button";

function App(props: any) {
  return (
    <Provider token="${USER_JWT}">
      <WebPushButton
        renderLabel={({ status, error }) =>
          error ||
          (status === "success"
            ? "disable webpush notifications"
            : "enable webpush notifications")
        }
      />
    </Provider>
  );
}

export default App;

<script lang="ts">
  import "@magicbell/svelte/styles/webpush-button.css";
  import Provider from "@magicbell/svelte/context-provider.svelte";
  import WebPushButton from "@magicbell/svelte/webpush-button.svelte";
</script>

<Provider token="${USER_JWT}">
  <WebPushButton
    renderLabel={({ status, error }) =>
      error ||
      (status === "success"
        ? "disable webpush notifications"
        : "enable webpush notifications")}
  />
</Provider>