Display an embedded cast from Farcaster in your React app
Tags: apps
Published: 2024-01-08 07:32:16

---
title: Display an embedded cast from Farcaster in your React app
published: true
date: 2024-01-06 00:14:00 UTC
tags: Apps
canonical_url: https://reactjsexample.com/display-an-embedded-cast-from-farcaster-in-your-react-app/
---

 ![Display an embedded cast from Farcaster in your React app](https://reactjsexample.com/content/images/2023/12/Code_2023-12_11-09-06.jpg)

![Display an embedded cast from Farcaster in your React app](https://camo.githubusercontent.com/c30338e87f521f9da2486e89c25f4a670573a4a1e6cfda80950c743383f7d210/68747470733a2f2f776f6a74656b2e696d2f6661726361737465722f72656163742d6661726361737465722d656d6265642d76322e706e67)

# react-farcaster-embed

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

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

![Display an embedded cast from Farcaster in your React app](https://private-user-images.githubusercontent.com/6843656/293291359-9c8d658e-91a1-49ed-9b4b-d59497052823.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDM5OTI0NTksIm5iZiI6MTcwMzk5MjE1OSwicGF0aCI6Ii82ODQzNjU2LzI5MzI5MTM1OS05YzhkNjU4ZS05MWExLTQ5ZWQtOWI0Yi1kNTk0OTcwNTI4MjMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDIzMTIzMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyMzEyMzFUMDMwOTE5WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZTczNzgzMmQ1YjIxNTEzZjBkM2UxNGNlZTM4YmZlMTU0YzVkYzk0MGE4YmUxZGZmNTdjOGI3OWU0MTY3NTY1NyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.LhqrXBSUoczcdNI8gkmzDy_QMjJN0ebKkuKIZr_1EMY)

## Features

- <input type="checkbox" id disabled checked> Shows the cast's author, their avatar and username, date when the cast was posted
- <input type="checkbox" id disabled checked> Renders the cast's content with links
- <input type="checkbox" id disabled checked> Shows the channel name and avatar
- <input type="checkbox" id disabled checked> Shows counts for replies, likes, recasts, watches
- <input type="checkbox" id disabled checked> Adds a link to the cast on Warpcast
- <input type="checkbox" id disabled> Renders images inline

## Installation

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

## Usage

```
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" />
```

## 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;
}
```

## Found it useful?

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

Send me a tip in ETH 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.

## GitHub

[View Github](https://github.com/pugson/react-farcaster-embed?ref=reactjsexample.com)