Registry / web-framework / react-twitter-embed

react-twitter-embed

library4.0.4jsnpmunverified

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.

web-framework communication

npm install react-twitter-embed

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-TWITTER-EMBE

react-twitter-embed

web-frameworkjavascriptv4.0.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

TwitterTimelineEmbed

✓ import { TwitterTimelineEmbed } from 'react-twitter-embed';

✗ import TwitterTimelineEmbed from 'react-twitter-embed';

All components are named exports, not default exports.

TwitterTweetEmbed

✓ import { TwitterTweetEmbed } from 'react-twitter-embed';

✗ const TwitterTweetEmbed = require('react-twitter-embed').TwitterTweetEmbed;

Prefer ESM imports for modern React applications. CommonJS `require` might lead to issues with tree-shaking or module resolution in some bundler configurations.

TwitterShareButton

✓ import { TwitterShareButton } from 'react-twitter-embed';

✗ import { TwitterShareButton } from 'react-twitter-embed/dist/TwitterShareButton';

The library provides a single entry point for all components since v2.0.1; direct imports from `dist` are generally unnecessary and not recommended.

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

import React from 'react'; import ReactDOM from 'react-dom/client'; import { TwitterTimelineEmbed, TwitterTweetEmbed, TwitterShareButton, TwitterFollowButton } from 'react-twitter-embed'; function App() { return ( <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', padding: '20px' }}> <h1>My Twitter Embeds</h1> <h2>Recent Tweets (Timeline)</h2> <TwitterTimelineEmbed sourceType="profile" screenName="reactjs" options={{ height: 400 }} /> <h2>Featured Tweet</h2> <TwitterTweetEmbed tweetId={'1567341851213031424'} // Example tweet ID for ReactJS /> <h2>Share on Twitter</h2> <TwitterShareButton url={'https://react.dev'} options={{ text: 'Check out the new React docs!', via: 'reactjs' }} /> <h2>Follow ReactJS</h2> <TwitterFollowButton screenName={'reactjs'} /> </div> ); } const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); root.render( <React.StrictMode> <App /> </React.StrictMode> );

Debug

Known issues

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

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.

affects: >=1.0.0

breakingVersion 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.

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

affects: >=2.0.1

gotchaA security vulnerability in a dependency was fixed in version 1.1.3. Users on older versions might be exposed to this vulnerability.

fix

Upgrade `react-twitter-embed` to version 1.1.3 or higher to ensure all known dependency vulnerabilities are patched.

affects: <1.1.3

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

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.

affects: >=1.0.0

Errors

Common errors & fixes

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.

Attempting to use a named export as a default import, e.g., `import TwitterTimelineEmbed from 'react-twitter-embed';`

fix

Use named imports for all components: `import { TwitterTimelineEmbed } from 'react-twitter-embed';`

TypeError: Cannot read properties of undefined (reading 'widgets') or similar errors related to `twttr`

This usually indicates that the Twitter Widgets JavaScript (`widgets.js`) failed to load or initialize correctly before the component tried to render.

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.

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! while resolving: your-app@1.0.0 npm ERR! found: react@18.0.0 npm ERR! peer react@"^16.0.0 || ^17.0.0" from react-twitter-embed@1.x.x

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

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.

Upgrade

Version history

4.0.4latest on npm

Audit

Dependencies

reactrequiredRequired for building React components. Supports React 16, 17, and 18.

react-domrequiredRequired for rendering React components to the DOM. Supports ReactDOM 16, 17, and 18.

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/saurabhnemade/react-twitter-embed ↗

packagehttps://www.npmjs.com/package/react-twitter-embed ↗