Vite

Installation

Follow the installation docs in the Introduction.

Usage

In any component, import PostThread from react-bluesky-embed and use it like so:

import { PostThread } from "react-bluesky-embed";
 
export const IndexPage = () => (
  <PostThread
    params={{
      did: "did:plc:gru662w3omynujkgwebgeeof",
      rkey: "3lbirib5xnc2u",
    }}
  />
);

You can learn more about PostThread in the Bluesky theme docs.

Running the test app

Clone the react-bluesky-embed repository and then run the following command:

pnpm install && pnpm dev --filter=vite-app...

The app will be up and running at http://localhost:5173 for the Vite app example.

The app shows the usage of react-bluesky-embed in different scenarios:

localhost:5173/ renders a single postThread.
localhost:5173/postThread/did:plc:gru662w3omynujkgwebgeeof/3lbirib5xnc2u renders dynamic post threads with SWR. PostThread already uses SWR and this page shows how to implement it manually.

The source code for react-bluesky-embed is imported from packages/react-bluesky-embed and any changes you make to it will be reflected in the app immediately.

Next.js CRA