react-farcaster-embed
TypeScript icon, indicating that this package has built-in type declarations

1.2.3 • Public • Published

react-farcaster-embed

react-farcaster-embed

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

Live Demo

Regular casts With images
PixelSnap 2023-12-29 at 12 59 17 AM@2x PixelSnap 2024-01-04 at 3 09 21 AM@2x

Features

  • [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 Warpcast
  • [x] Renders images inline
  • [x] Renders videos inline
  • [ ] Renders rich embeds for links

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 or Twitter.

Send me a tip in ETH to

  • pugson.eth
  • 0x96a77560146501eAEB5e6D5B7d8DD1eD23DEfa23

Other projects

You might also like ENS Data for getting ENS records and avatars or ABI Data for grabbing smart contract ABIs remotely.

Readme

Keywords

Package Sidebar

Install

npm i react-farcaster-embed

Weekly Downloads

101

Version

1.2.3

License

The Unlicense

Unpacked Size

54.8 kB

Total Files

9

Last publish

Collaborators

  • pugson