# react-farcaster-embed

> Embed casts from Farcaster in your React app.

Latest version **1.11.0** (published 2025-10-20) · The Unlicense license · 0 weekly downloads

## Install

```sh
npm install react-farcaster-embed
pnpm add react-farcaster-embed
yarn add react-farcaster-embed
bun add react-farcaster-embed
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.11.0 |
| Published | 2025-10-20 |
| First published | 2023-12-28 |
| Weekly downloads | 0 |
| License | The Unlicense |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 194.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 82 |
| Author | pugson |
| Maintainers | pugson |
| Keywords | react, farcaster, embed |

## Links

- npm: https://www.npmjs.com/package/react-farcaster-embed
- Repository: https://github.com/pugson/react-farcaster-embed
- Homepage: https://wojtek.im/journal/react-farcaster-embed-casts-in-your-react-app
- Issues: https://github.com/pugson/react-farcaster-embed/issues
- npm.io page: https://npm.io/package/react-farcaster-embed

## Dependencies (3)

- [linkifyjs](https://npm.io/package/linkifyjs.md) ^4.1.3
- [server-only](https://npm.io/package/server-only.md) ^0.0.1
- [linkify-react](https://npm.io/package/linkify-react.md) ^4.1.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.11.0 (latest) — 2025-10-20
- 1.10.0 — 2025-09-22
- 1.9.0 — 2025-05-23
- 1.8.9 — 2024-10-16
- 1.8.8 — 2024-10-15
- 1.8.7 — 2024-10-11
- 1.8.6 — 2024-10-02
- 1.8.5 — 2024-10-02
- 1.8.4 — 2024-08-17
- 1.8.3 — 2024-07-24
- 1.8.2 — 2024-07-23
- 1.8.1 — 2024-07-23
- 1.7.2 — 2024-07-01
- 1.7.1 — 2024-07-01
- 1.7.0 — 2024-06-22
- … 35 more at https://npm.io/package/react-farcaster-embed/versions

## README

![react-farcaster-embed](https://wojtek.im/farcaster/react-farcaster-embed-v2.png)

# react-farcaster-embed

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

## Examples

[Live Demo](https://wojtek.im/journal/react-farcaster-embed-casts-in-your-react-app)

<details>
  <summary>Regular casts</summary>
  <img src="https://github.com/pugson/react-farcaster-embed/assets/6843656/9c8d658e-91a1-49ed-9b4b-d59497052823" />
</details>

<details>
  <summary>Quoted casts</summary>
  <img src="https://github.com/pugson/react-farcaster-embed/assets/6843656/50bb8f9d-6041-4c98-a854-8d73df2e82d2" />
</details>

<details>
  <summary>With images</summary>
  <img src="https://github.com/pugson/react-farcaster-embed/assets/6843656/7ba61dc8-6b46-4721-a686-31f8d5c2cfda" />
</details>

<details>
  <summary>With video</summary>
  <img src="https://github.com/pugson/react-farcaster-embed/assets/6843656/fc58fc4e-8c86-400c-81dc-89fe9a050092" />
</details>

<details>
  <summary>With link previews</summary>
  <img src="https://github.com/pugson/react-farcaster-embed/assets/6843656/a61783de-eb68-481c-b215-c1933d3d6925" />
</details>

## Features

- [x] Supports server components and client components
- [x] Shows the cast's author, their avatar and username, date when the cast was posted
- [x] Renders the cast's content with links
- [x] Shows the channel name and avatar
- [x] Shows counts for replies, likes, recasts + quotes, watches
- [x] Adds a link to the cast on Farcaster
- [x] Renders images inline
- [x] Renders videos inline
- [x] Renders rich embeds for links
- [x] Renders quoted casts with images and videos
- [ ] Renders a frame preview with buttons

## Installation

```shell
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:

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


// use farcaster url
<FarcasterEmbed url="https://farcaster.xyz/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:

```tsx
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:

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

// use farcaster url
<FarcasterEmbed url="https://farcaster.xyz/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:

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

## Custom Endpoint

In case you need to self host the Farcaster Client API proxy, you can [fork this repo](https://github.com/pugson/farcaster-api-proxy) 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:

```jsx
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.

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

## Feeding your own cast JSON into the component

Farcaster'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.

```jsx
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.

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

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

export const FarcasterEmbed = (props) => (
  <FCEmbed
    {...props}
    options={{
      silentError: true,
    }}
  />
);
```

## Hide Farcaster branding

You can hide the Farcaster logo link by setting the `hideFarcasterLogo` option to `true`.

```jsx
<FarcasterEmbed {...props} options={{ hideFarcasterLogo: true }} />
```

## Found it useful?

Follow me on [Farcaster](https://farcaster.xyz/pugson) or [Twitter](https://twitter.com/pugson).

Send me a tip in ETH or $DEGEN to

- `pugson.eth`
- `0x96a77560146501eAEB5e6D5B7d8DD1eD23DEfa23`

### Other projects

You might also like [ENS Data](https://ensdata.net) for getting ENS records and avatars or [ABI Data](https://abidata.net) for grabbing smart contract ABIs remotely.

---
_Source: https://npm.io/package/react-farcaster-embed · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._