capaj / react-tweet-embed Goto Github PK
View Code? Open in Web Editor NEWreact component which takes a tweet id in props and you'll get a tweet embed rendered once the twitter clientside API loads, nothing more
License: MIT License
react component which takes a tweet id in props and you'll get a tweet embed rendered once the twitter clientside API loads, nothing more
License: MIT License
is there a flag to disable the console logging?
on line 55 of tweet-embed.js window.twttr.ready().then(function (_ref) {
would be nice if we could pass in a prop to hide the media i.e. i may want to show the tweet without the picture. Is that an easy fix?
Has anyone else noticed react-tweet-embed failing in Firefox 69.0.1? It works fine for me when I'm running my app on localhost, but it fails when it is deployed. I do see some errors in my JavaScript console like:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://syndication.twitter.com/settings. (Reason: CORS request did not succeed).
And then a strange network error:
Error: Network error. widget_iframe.d6364fae9340b0be5f13818370141fd0.html:12:7397
The same exact page works fine in Chrome, so I'm wondering if there is some new strictness in Firefox? This functionality worked fine before in Firefox. I'd be curious if other react-tweet-embed users are seeing the same behavior in Firefox.
Am I missing something or can we not give the component an HTML id?
Surely tweet_id or something would be better than using a reserved keyword?
It would be convenient if the package was provided precompiled. By the looks of it, the neatest way to achieve that would be to replace the current JSX bit with React.createElement
. If you want a PR, I can do that.
Will this work in React Native?
placeholder
is not exposed so setting a placeholder={<>loading</>}
property does nothing
Hi
Looks easy to use but it doesn't work...
ERROR: Invariant Violation: Expected a component class, got [object Object].
Possible Unhandled Promise Rejection (id: 0):
TypeError: Cannot read property '_currentElement' of null
Hi,
I had a hard time figuring out why webpack >= 2 produced a build of my project which contained ()=>
' in it. IE 11 gives a Syntax error on it.
It was because this project is using the class properties to autobind functions and webpack includes the source code pointed by the module key in package.json.
I tried to force my webpack config to transpile this package, but it fails because babel-loader takes the .babelrc from this project to transpile it.
If I remove node_modules/react-tweet-embed/.babelrc, babel-loader takes my .babelrc config and this transpiles fine.
Or if I write a node_modules/react-tweet-embed/.babelrc
file with the following content:
{
"plugins" : ["transform-class-properties"],
"presets": ["es2015", "react"]
}
it works too. Would you consider changing the .babelrc to this?
In general libraries that expose a module key in package.json point to ES module but transpiled to ES5 as far as I can tell.
package.json
shows v1.1.0, npm shows v1.1.1.
Sometimes the app might have already the id and the text of a bunch of tweets, and it would be nice to display a text placeholder before the embedded HTML finishes loading. The syntax could look like this:
<TweetEmbed id='692527862369357824' text='¯\_(ツ)_/¯'/>
Great package. Ever tried it inside Apache Cordova?
It works fine for me on a website but the <iframe> comes back empty when loaded in a Cordova app.
if I modify tweet-embed.js
and tweet-embed.es.js
to force https, the code loads but the data still doesn't.
Not getting any errors in the console, and the Network inspector says the HTTPS requests respond with 200.
Any idea on how to diagnose further?
When using other libraries from twitter such as Twitter Text the check that is currently in place to check the presence of the widget.js script fails as the twttr object is present.
Using if (!(window.twttr && window.twttr.ready)) {
solves this bug.
Describe the bug
I can not install react-twitter-embed on the Next.js version 12.0.7.
To Reproduce
Steps to reproduce the behavior:
Go to the next.js project directory.
Open the terminal in the project directory
Run npm install --save react-twitter-embed
See error.
Expected behavior
A clear and concise description of what you expected to happen
.
Hello.
I recently started building a simple smartphone app using ReactNative+ Expo with your repository as a reference.
I have a very simple question: are there any ways to use your library in a ReactNative project?
I actually tried that with Expo snack with web(not smartphone device), and the embedded tweets showed up fine. Please check the below link.
However, when I use Expo in a local environment and use the same code, I get an error. What I did is here.
Commands:
Expo init my-project
cd my-project
npm i react-tweet-embed
Edit App.js to the exact same code that is in snack. Lastly run Expo start
.
Then, I get these Errors:
Invariant Violation: View config getter callback for component
div
must be a function (receivedundefined
). Make sure to start component names with a capital letter.This error is located at:
in div (created by r) in r (at App.js:8) in App (created by ExpoRoot) in ExpoRoot (at renderApplication.js:45) in RCTView (at View.js:34) in View (at AppContainer.js:106) in RCTView (at View.js:34) in View (at AppContainer.js:132) in AppContainer (at renderApplication.js:39)
at node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
at node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:9:32 in ErrorUtils.setGlobalHandler$argument_0
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:293:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:154:27 in invoke
at node_modules\regenerator-runtime\runtime.js:164:18 in PromiseImpl.resolve.then$argument_0
at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue
I'm pretty new to smartphone app. and ReactNative and only recently started to understand the differece between React and ReactNative.
I've spent today looking for various ways to use your library, but I can't find a solution at all. You are my last hope..please help me :,-(
P.S. I have a sneaking suspicion that the root cause of this is ReactNative's support for views instead of div, but on the other hand, I can't figure out why it's displaying well on snack.
When bundling react-tweet-embed with webpack, I receive an error when visiting the page with Safari on iOS: ReferenceError: Can't find variable: callbacks
.
Hi. Thanks for the handy library! We're using this in a mobile context and the isLocal logic causes the rendering to fail. Would you accept a PR that allows isLocal
to be passed as an optional boolean value?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.