@jamwidgets/react

Name: Jamwidgets
Author: Jamwidgets

React hooks for comments, reactions, forms, and subscriptions. Works with Next.js, Remix, Vite, and more.

Installation

npm install @jamwidgets/react

Works with React 18+ and React 19. Compatible with Next.js, Remix, Vite, and more.

Quick Start

useSubscribe

import { useSubscribe } from "@jamwidgets/react";
import type { FormEvent } from "react";

export function Newsletter() {
  const { subscribe, status, message } = useSubscribe({
    siteKey: "your-key",
  });

  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const data = new FormData(e.currentTarget);
    subscribe(String(data.get("email")));
  };

  return (
    <form onSubmit={onSubmit}>
      <input name="email" type="email" required />
      <button type="submit" disabled={status === "loading"}>Subscribe</button>
      {message && <p>{message}</p>}
    </form>
  );
}

useReactions

import { useReactions } from "@jamwidgets/react";

export function LikeButton() {
  const { counts, userReactions, addReaction, removeReaction } = useReactions({
    siteKey: "your-key",
    contentId: "my-page",
  });
  const liked = userReactions.includes("like");

  return (
    <button
      type="button"
      onClick={() => (liked ? removeReaction("like") : addReaction("like"))}
    >
      {liked ? "Unlike" : "Like"} ({counts.like ?? 0})
    </button>
  );
}

useComments

import { useComments } from "@jamwidgets/react";

export function Comments() {
  const { comments, postComment } = useComments({
    siteKey: "your-key",
    contentId: "my-page",
  });

  return (
    <div>
      {comments.map((c) => (
        <p key={c.id}>{c.authorName}: {c.content}</p>
      ))}
      <button type="button" onClick={() => postComment("Ada", "Great post!")}>
        Post a comment
      </button>
    </div>
  );
}

Available Hooks

useSubscribe

useReactions

useComments

useForm

useWaitlist

useFeedback

usePoll

useAnnouncements

useViews

Powered-by footer

The hooks render no UI. On the Free plan, render <PoweredBy siteKey="your-key" /> from @jamwidgets/react below the widgets you build; it renders nothing on Team or until the site config loads. Use usePoweredBy if you style your own footer. Gallery components include it already.

Full API Reference

For complete documentation including all hook options, return values, and TypeScript types, see the package README:

View full docs on GitHub