{"id":11897,"library":"react-twitter-embed","title":"React Twitter Embed Components","description":"react-twitter-embed is a JavaScript library providing a straightforward way to integrate various Twitter widgets (such as timelines, individual tweets, share buttons, follow buttons, and video embeds) into React applications. It acts as a wrapper around the official Twitter Widgets API, handling the asynchronous loading and rendering of Twitter's external scripts. The current stable version is 4.0.4. While release cadence isn't strictly predictable, the project has seen consistent updates addressing issues, adding new widget types, and ensuring compatibility with newer React versions. Its key differentiator is simplicity, abstracting away the complexities of the Twitter Widgets JavaScript API into declarative React components, making it easier to embed dynamic Twitter content without manual script management.","status":"active","version":"4.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/saurabhnemade/react-twitter-embed","tags":["javascript"],"install":[{"cmd":"npm install react-twitter-embed","lang":"bash","label":"npm"},{"cmd":"yarn add react-twitter-embed","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-twitter-embed","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for building React components. Supports React 16, 17, and 18.","package":"react","optional":false},{"reason":"Required for rendering React components to the DOM. Supports ReactDOM 16, 17, and 18.","package":"react-dom","optional":false}],"imports":[{"note":"All components are named exports, not default exports.","wrong":"import TwitterTimelineEmbed from 'react-twitter-embed';","symbol":"TwitterTimelineEmbed","correct":"import { TwitterTimelineEmbed } from 'react-twitter-embed';"},{"note":"Prefer ESM imports for modern React applications. CommonJS `require` might lead to issues with tree-shaking or module resolution in some bundler configurations.","wrong":"const TwitterTweetEmbed = require('react-twitter-embed').TwitterTweetEmbed;","symbol":"TwitterTweetEmbed","correct":"import { TwitterTweetEmbed } from 'react-twitter-embed';"},{"note":"The library provides a single entry point for all components since v2.0.1; direct imports from `dist` are generally unnecessary and not recommended.","wrong":"import { TwitterShareButton } from 'react-twitter-embed/dist/TwitterShareButton';","symbol":"TwitterShareButton","correct":"import { TwitterShareButton } from 'react-twitter-embed';"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { \n  TwitterTimelineEmbed, \n  TwitterTweetEmbed, \n  TwitterShareButton, \n  TwitterFollowButton \n} from 'react-twitter-embed';\n\nfunction App() {\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', padding: '20px' }}>\n      <h1>My Twitter Embeds</h1>\n\n      <h2>Recent Tweets (Timeline)</h2>\n      <TwitterTimelineEmbed\n        sourceType=\"profile\"\n        screenName=\"reactjs\"\n        options={{ height: 400 }}\n      />\n\n      <h2>Featured Tweet</h2>\n      <TwitterTweetEmbed\n        tweetId={'1567341851213031424'} // Example tweet ID for ReactJS\n      />\n\n      <h2>Share on Twitter</h2>\n      <TwitterShareButton\n        url={'https://react.dev'}\n        options={{ text: 'Check out the new React docs!', via: 'reactjs' }}\n      />\n\n      <h2>Follow ReactJS</h2>\n      <TwitterFollowButton\n        screenName={'reactjs'}\n      />\n    </div>\n  );\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);\nroot.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>\n);","lang":"typescript","description":"This quickstart demonstrates embedding a Twitter timeline, a specific tweet, a share button, and a follow button in a React application using the core components provided by `react-twitter-embed`."},"warnings":[{"fix":"For SSR applications, consider dynamically importing components with `next/dynamic` or `react-loadable` with `ssr: false`, or rendering the components only on the client side after the initial mount.","message":"The Twitter Widgets API relies on client-side JavaScript. Content embedded via `react-twitter-embed` will not be visible during server-side rendering (SSR) unless specific SSR handling is implemented to defer rendering until the client side or use a solution like `react-no-ssr`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure your imports are consistent with the recommended `import { ComponentName } from 'react-twitter-embed';` pattern. If encountering module resolution issues, update your bundler configuration to correctly resolve packages from `node_modules`.","message":"Version 2.0.1 introduced 'Multi-module distributions'. While the primary import path `from 'react-twitter-embed'` remains, this change might have affected environments that relied on specific internal module paths or non-standard bundling configurations prior to this version.","severity":"breaking","affected_versions":">=2.0.1"},{"fix":"Upgrade `react-twitter-embed` to version 1.1.3 or higher to ensure all known dependency vulnerabilities are patched.","message":"A security vulnerability in a dependency was fixed in version 1.1.3. Users on older versions might be exposed to this vulnerability.","severity":"gotcha","affected_versions":"<1.1.3"},{"fix":"Implement error boundaries around Twitter embed components to gracefully handle rendering failures. Consider lazy loading widgets or staggering their initialization if you have many on a single page.","message":"Twitter's Widgets API has rate limits and can occasionally fail to load or render content, especially if multiple widgets are loaded concurrently or if the user has ad blockers. The `react-twitter-embed` library itself does not inherently handle these API-level issues.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Use named imports for all components: `import { TwitterTimelineEmbed } from 'react-twitter-embed';`","cause":"Attempting to use a named export as a default import, e.g., `import TwitterTimelineEmbed from 'react-twitter-embed';`","error":"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."},{"fix":"Ensure you have a stable internet connection. If the issue persists, try wrapping your `react-twitter-embed` components in a `React.Suspense` boundary or implementing a fallback UI while waiting for the Twitter script to load. This library generally manages the script loading, but external factors can interfere.","cause":"This usually indicates that the Twitter Widgets JavaScript (`widgets.js`) failed to load or initialize correctly before the component tried to render.","error":"TypeError: Cannot read properties of undefined (reading 'widgets') or similar errors related to `twttr`"},{"fix":"Upgrade `react-twitter-embed` to the latest version (4.x.x currently) which declares compatibility with React 18, or downgrade your React version if an upgrade is not feasible.","cause":"You are using an older version of `react-twitter-embed` that does not declare compatibility with newer React versions (e.g., React 18) in its `peerDependencies`.","error":"npm ERR! code ERESOLVE\nnpm ERR! ERESOLVE unable to resolve dependency tree\nnpm ERR! while resolving: your-app@1.0.0\nnpm ERR! found: react@18.0.0\nnpm ERR! peer react@\"^16.0.0 || ^17.0.0\" from react-twitter-embed@1.x.x"}],"ecosystem":"npm"}