React SDK

npm install @changespage/react react-markdown

"use client";

import { createChangesPageClient, usePosts, ChangelogPost } from "@changespage/react";
import Markdown from "react-markdown";

const client = createChangesPageClient({
  baseUrl: "https://your-page.changes.page",
});

function Changelog() {
  const { posts, hasMore, loading, loadMore } = usePosts({ client });

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      {posts.map((post) => (
        <ChangelogPost key={post.id} post={post}>
          {({ title, plainText, tags, publicationDate }) => (
            <article>
              <h2>{title}</h2>
              <time>{publicationDate?.toLocaleDateString()}</time>
              <Markdown>{plainText}</Markdown>
            </article>
          )}
        </ChangelogPost>
      ))}
      {hasMore && <button type="button" onClick={loadMore}>Load More</button>}
    </div>
  );
}

<ChangelogPost post={post}>
  {({ id, title, content, plainText, tags, publicationDate, url }) => (
    // Your custom UI
  )}
</ChangelogPost>