react-farcaster-embed

Display an embedded cast from Farcaster in your React app. Works with Next.js SSR.

Examples

Live Demo

Regular casts

Quoted casts

With images

With video

With link previews

Features

Installation

npm i react-farcaster-embed
# or
yarn add react-farcaster-embed
# or
pnpm add react-farcaster-embed

Usage

React Server Components / Next.js App Router

Add these imports inside your server component:

import { FarcasterEmbed } from "react-farcaster-embed";
import "react-farcaster-embed/dist/styles.css"; // include default styles or write your own


// use warpcast url
<FarcasterEmbed url="https://warpcast.com/pugson/0x4294c797" />

// or username and hash of the cast
<FarcasterEmbed username="dwr" hash="0x48d47343" />

Client Components / Next.js Pages Router

Add the CSS import inside _app.tsx if you are using Next.js Pages Router:

import "@/styles/globals.css";
import "react-farcaster-embed/dist/styles.css";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

And then use the component in your client component using a special import:

import { FarcasterEmbed } from "react-farcaster-embed/dist/client";

// use warpcast url
<FarcasterEmbed url="https://warpcast.com/pugson/0x4294c797" />

// or username and hash of the cast
<FarcasterEmbed username="dwr" hash="0x48d47343" />

Styling

The embed will inherit your body color by default when you import the default stylesheet.

You can change the color of the component by changing its parent's color or adding custom CSS:

.farcaster-embed-container {
  color: purple;
}

Custom Endpoint

In case you need to self host the Warpcast Client API proxy, you can fork this repo and set the customEndpoint option in the FarcasterEmbed component.

Easiest way to do this is to make a wrapper component with that option applied. Example:

import { FarcasterEmbed as FCEmbed } from "react-farcaster-embed";

export const FarcasterEmbed = (props) => (
  <FCEmbed
    {...props}
    options={{
      customEndpoint: "https://your-endpoint.xyz/api/casts",
    }}
  />
);

Casts will be fetched from your custom proxy instead of the default one using this URL structure. Make sure your proxy supports it.

await fetch(`${options?.customEndpoint}/${username}/${hash}`);

Feeding your own cast JSON into the component

Warpcast's API will not return anything when the cast has been deleted, so this is useful if you want to display deleted casts from archival data using your own indexer. Use the castData prop to pass in the cast's JSON into the component to render.

const data = { /* cast data coming from your own indexer or Neynar */ };

<FarcasterEmbed castData={data} />

Prevent errors for deleted casts

You can use the silentError option to prevent errors from being thrown when the cast is deleted or unable to be fetched.