@jamwidgets/solid

Name: Jamwidgets
Author: Jamwidgets

SolidJS primitives for comments, reactions, forms, and subscriptions. Works with SolidStart, Astro, and standalone apps.

npm GitHub

Installation

npm install @jamwidgets/solid

Works with SolidJS 1.8+. Compatible with SolidStart, Astro, and standalone apps.

Quick Start

createSubscribe

import { createSubscribe } from "@jamwidgets/solid";

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

  const onSubmit = (e: SubmitEvent) => {
    e.preventDefault();
    const data = new FormData(e.currentTarget as HTMLFormElement);
    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>
  );
}

createReactions

import { createReactions } from "@jamwidgets/solid";

export function LikeButton() {
  const { counts, userReactions, addReaction, removeReaction } =
    createReactions({
      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>
  );
}

createComments

import { createComments } from "@jamwidgets/solid";
import { For } from "solid-js";

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

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

Available Primitives

createSubscribe

createReactions

createComments

createForm

createWaitlist

createFeedback

createPoll

createAnnouncements

createViews

Powered-by footer

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

Full API Reference

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

View full docs on GitHub