API Reference

Post

import { Post } from "bsky-react-post";

<Post handle="adima7.bsky.social" id="3laq6uzwjbc2t" />

Fetches and renders the post. It accepts the following props:

• handle - string: the post handle. For example in https://bsky.app/profile/adima7.bsky.social/post/3laq6uzwjbc2t the handle is adima7.bsky.social.
• did - string: the post DID. For example in at://did:plc:xdwatsttsxnl5h65mf3ddxbq/app.bsky.feed.post/3laq6uzwjbc2t the post DID is did:plc:xdwatsttsxnl5h65mf3ddxbq.
• id - string: the post ID. For example in https://bsky.app/profile/adima7.bsky.social/post/3laq6uzwjbc2t the post ID is 3laq6uzwjbc2t.
• apiUrl - string (Optional): the API URL to fetch the post from. Defaults to https://bsky-react-post.rhinobase.io/api/post?handle=:handle&id=:id&did=:did.
• fallback - ReactNode: The fallback component to render while the post is loading. Defaults to PostSkeleton.
• onError - (error?: any) => any: The returned error will be sent to the PostNotFound component.
• components - PostComponents: Components to replace the default post components.
• fetchOptions - RequestInit (Optional): options to pass to fetch. Try to pass down a reference to the same object to avoid unnecessary re-renders.

If the environment where Post is used does not support React Server Components then it will work with SWR instead and the post will be fetched from https://bsky-react-post.rhinobase.io/api/post, which is CORS friendly.

We highly recommend adding your own API route to fetch the post in production (as we cannot guarantee our IP will not get limited). You can do it by using the apiUrl prop:

<Post apiUrl={id && `/api/post/${id}`} />

Note: apiUrl does nothing if the Post is rendered in a server component because it can fetch directly from Bluesky's CDN.

Here's a good example of how to setup your own API route:

import type { VercelRequest, VercelResponse } from "@vercel/node";
import { fetchPost } from "bsky-react-post/api";

const handler = async (req: VercelRequest, res: VercelResponse) => {
  const postId = req.query.post;

  if (req.method !== "GET" || typeof postId !== "string") {
    res.status(400).json({ error: "Bad Request." });
    return;
  }

  try {
    const post = await fetchPost(postId);
    res.status(post ? 200 : 404).json({ data: post ?? null });
  } catch (error) {
    console.error(error);
    res.status(400).json({ error: error.message ?? "Bad request." });
  }
};

export default handler;

Something similar can be done with Next.js API Routes or Route Handlers.

EmbeddedPost

import { EmbeddedPost } from "bsky-react-post";

Renders a post. It accepts the following props:

• thread - AppBskyFeedDefs.ThreadViewPost: the post data, as returned by fetchPost. Required.

PostSkeleton

import { PostSkeleton } from "bsky-react-post";

A post skeleton useful for loading states.

PostNotFound

import { PostNotFound } from "bsky-react-post";

A post not found component. It accepts the following props:

• error - any: the error that was thrown when fetching the post. Not required.