@scribe-atp/react

React hooks for reading Scribe CMS content from the AT Protocol. Requires React 18 or later.

Wraps @scribe-atp/core with idiomatic React state management. Handles loading state, error state, and request cancellation automatically — re-fetches when parameters change and aborts in-flight requests on unmount.

Installation

npm install @scribe-atp/react

Usage

useSite

import { useSite } from "@scribe-atp/react";

function BlogIndex() {
  const { site, loading, error } = useSite("alice.bsky.social", "https://alice.bsky.social");

  if (loading) return <p>Loading…</p>;
  if (error)   return <p>Something went wrong: {error.message}</p>;

  return (
    <ul>
      {site.groups.map((group) =>
        group.articles.map((article) => (
          <li key={article.uri}>{article.title}</li>
        ))
      )}
    </ul>
  );
}

useArticle

import { useArticle } from "@scribe-atp/react";

function ArticlePage({ author, slug }: { author: string; slug: string }) {
  const { article, loading, error } = useArticle(author, slug);

  if (loading) return <p>Loading…</p>;
  if (error)   return <p>Something went wrong: {error.message}</p>;

  return (
    <article>
      <h1>{article.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: article.content }} />
    </article>
  );
}

TypeScript types

All types from @scribe-atp/core are re-exported so you only need one import:

import type { Site, Article, ArticleRef, SiteGroup } from "@scribe-atp/react";

Using with server-side rendering

If you're using React Router v7 framework mode, consider @scribe-atp/react-router-framework instead — it fetches on the server and avoids client-side loading states entirely.

For Next.js App Router or other SSR frameworks, use @scribe-atp/core directly in your server components or page loaders.

License

MIT