{"id":13767512,"url":"https://github.com/pugson/react-farcaster-embed","last_synced_at":"2025-10-15T21:40:14.459Z","repository":{"id":214523973,"uuid":"736729552","full_name":"pugson/react-farcaster-embed","owner":"pugson","description":"Display an embedded cast from Farcaster in your React app. Works with Next.js SSR.","archived":false,"fork":false,"pushed_at":"2024-10-16T23:46:59.000Z","size":92,"stargazers_count":80,"open_issues_count":0,"forks_count":8,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-28T21:06:25.824Z","etag":null,"topics":["farcaster","nextjs","react","warpcast"],"latest_commit_sha":null,"homepage":"https://npm.im/react-farcaster-embed","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pugson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"pugson"}},"created_at":"2023-12-28T17:51:41.000Z","updated_at":"2025-03-27T18:38:49.000Z","dependencies_parsed_at":"2024-01-02T02:03:57.974Z","dependency_job_id":"23e971e0-2111-4075-9092-bd089cb2a036","html_url":"https://github.com/pugson/react-farcaster-embed","commit_stats":{"total_commits":65,"total_committers":3,"mean_commits":"21.666666666666668","dds":0.09230769230769231,"last_synced_commit":"c389876afafa1f7ac9acbd748c885e126fbd6137"},"previous_names":["pugson/react-farcaster-embed"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pugson%2Freact-farcaster-embed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pugson%2Freact-farcaster-embed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pugson%2Freact-farcaster-embed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pugson%2Freact-farcaster-embed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pugson","download_url":"https://codeload.github.com/pugson/react-farcaster-embed/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247256113,"owners_count":20909240,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["farcaster","nextjs","react","warpcast"],"created_at":"2024-08-03T16:01:09.262Z","updated_at":"2025-10-15T21:40:14.454Z","avatar_url":"https://github.com/pugson.png","language":"TypeScript","funding_links":["https://github.com/sponsors/pugson"],"categories":["Developer Resources","Uncategorized"],"sub_categories":["Repos","Uncategorized"],"readme":"![react-farcaster-embed](https://wojtek.im/farcaster/react-farcaster-embed-v2.png)\n\n# react-farcaster-embed\n\nDisplay an embedded cast from Farcaster in your React app. Works with Next.js SSR.\n\n## Examples\n\n[Live Demo](https://wojtek.im/journal/react-farcaster-embed-casts-in-your-react-app)\n\n\u003cdetails\u003e\n  \u003csummary\u003eRegular casts\u003c/summary\u003e\n  \u003cimg src=\"https://github.com/pugson/react-farcaster-embed/assets/6843656/9c8d658e-91a1-49ed-9b4b-d59497052823\" /\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eQuoted casts\u003c/summary\u003e\n  \u003cimg src=\"https://github.com/pugson/react-farcaster-embed/assets/6843656/50bb8f9d-6041-4c98-a854-8d73df2e82d2\" /\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eWith images\u003c/summary\u003e\n  \u003cimg src=\"https://github.com/pugson/react-farcaster-embed/assets/6843656/7ba61dc8-6b46-4721-a686-31f8d5c2cfda\" /\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eWith video\u003c/summary\u003e\n  \u003cimg src=\"https://github.com/pugson/react-farcaster-embed/assets/6843656/fc58fc4e-8c86-400c-81dc-89fe9a050092\" /\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eWith link previews\u003c/summary\u003e\n  \u003cimg src=\"https://github.com/pugson/react-farcaster-embed/assets/6843656/a61783de-eb68-481c-b215-c1933d3d6925\" /\u003e\n\u003c/details\u003e\n\n## Features\n\n- [x] Supports server components and client components\n- [x] Shows the cast's author, their avatar and username, date when the cast was posted\n- [x] Renders the cast's content with links\n- [x] Shows the channel name and avatar\n- [x] Shows counts for replies, likes, recasts + quotes, watches\n- [x] Adds a link to the cast on Farcaster\n- [x] Renders images inline\n- [x] Renders videos inline\n- [x] Renders rich embeds for links\n- [x] Renders quoted casts with images and videos\n- [ ] Renders a frame preview with buttons\n\n## Installation\n\n```shell\nnpm i react-farcaster-embed\n# or\nyarn add react-farcaster-embed\n# or\npnpm add react-farcaster-embed\n```\n\n## Usage\n\n### React Server Components / Next.js App Router\n\nAdd these imports inside your server component:\n\n```jsx\nimport { FarcasterEmbed } from \"react-farcaster-embed\";\nimport \"react-farcaster-embed/dist/styles.css\"; // include default styles or write your own\n\n\n// use farcaster url\n\u003cFarcasterEmbed url=\"https://farcaster.xyz/pugson/0x4294c797\" /\u003e\n\n// or username and hash of the cast\n\u003cFarcasterEmbed username=\"dwr\" hash=\"0x48d47343\" /\u003e\n```\n\n### Client Components / Next.js Pages Router\n\nAdd the CSS import inside `_app.tsx` if you are using Next.js Pages Router:\n\n```tsx\nimport \"@/styles/globals.css\";\nimport \"react-farcaster-embed/dist/styles.css\";\nimport type { AppProps } from \"next/app\";\n\nexport default function App({ Component, pageProps }: AppProps) {\n  return \u003cComponent {...pageProps} /\u003e;\n}\n```\n\nAnd then use the component in your client component using a special import:\n\n```jsx\nimport { FarcasterEmbed } from \"react-farcaster-embed/dist/client\";\n\n// use farcaster url\n\u003cFarcasterEmbed url=\"https://farcaster.xyz/pugson/0x4294c797\" /\u003e\n\n// or username and hash of the cast\n\u003cFarcasterEmbed username=\"dwr\" hash=\"0x48d47343\" /\u003e\n```\n\n## Styling\n\nThe embed will inherit your body color by default when you import the default stylesheet.\n\nYou can change the color of the component by changing its parent's color or adding custom CSS:\n\n```css\n.farcaster-embed-container {\n  color: purple;\n}\n```\n\n## Custom Endpoint\n\nIn 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.\n\nEasiest way to do this is to make a wrapper component with that option applied. Example:\n\n```jsx\nimport { FarcasterEmbed as FCEmbed } from \"react-farcaster-embed\";\n\nexport const FarcasterEmbed = (props) =\u003e (\n  \u003cFCEmbed\n    {...props}\n    options={{\n      customEndpoint: \"https://your-endpoint.xyz/api/casts\",\n    }}\n  /\u003e\n);\n```\n\nCasts will be fetched from your custom proxy instead of the default one using this URL structure. Make sure your proxy supports it.\n\n```jsx\nawait fetch(`${options?.customEndpoint}/${username}/${hash}`);\n```\n\n## Feeding your own cast JSON into the component\n\nFarcaster'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.\n\n```jsx\nconst data = {\n  /* cast data coming from your own indexer or Neynar */\n};\n\n\u003cFarcasterEmbed castData={data} /\u003e;\n```\n\n## Prevent errors for deleted casts\n\nYou can use the `silentError` option to prevent errors from being thrown when the cast is deleted or unable to be fetched.\n\nEasiest way to do this is to make a wrapper component with that option applied. Example:\n\n```jsx\nimport { FarcasterEmbed as FCEmbed } from \"react-farcaster-embed\";\n\nexport const FarcasterEmbed = (props) =\u003e (\n  \u003cFCEmbed\n    {...props}\n    options={{\n      silentError: true,\n    }}\n  /\u003e\n);\n```\n\n## Hide Farcaster branding\n\nYou can hide the Farcaster logo link by setting the `hideFarcasterLogo` option to `true`.\n\n```jsx\n\u003cFarcasterEmbed {...props} options={{ hideFarcasterLogo: true }} /\u003e\n```\n\n## Found it useful?\n\nFollow me on [Farcaster](https://farcaster.xyz/pugson) or [Twitter](https://twitter.com/pugson).\n\nSend me a tip in ETH or $DEGEN to\n\n- `pugson.eth`\n- `0x96a77560146501eAEB5e6D5B7d8DD1eD23DEfa23`\n\n### Other projects\n\nYou 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpugson%2Freact-farcaster-embed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpugson%2Freact-farcaster-embed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpugson%2Freact-farcaster-embed/lists"}