Giter VIP home page Giter VIP logo

react-tweet-embed's Introduction

react-tweet-embed

Install

npm i react-tweet-embed

Quickstart Edit react-tweet-embed

import React from 'react'
import TweetEmbed from 'react-tweet-embed'

export const App = () => {
  return <TweetEmbed tweetId="692527862369357824" />
}

You don't have to put //platform.twitter.com/widgets.js script in your index.html as this lib will put it there if twttr is not found on window.

Props

placeholder

Text to be shown while the tweet is loading:

<TweetEmbed id='1186523464712146944' placeholder='Sending this tweet through space via Starlink satellite 🛰'/>

options

Key-value pairs from the embedded tweet parameter reference:

<TweetEmbed id='783943172057694208' options={{cards: 'hidden' }}/>
<TweetEmbed id='771763270273294336' options={{theme: 'dark' }}/>

react-tweet-embed's People

Contributors

capaj avatar crux153 avatar dandv avatar dependabot[bot] avatar lucleray avatar mauriciorobayo avatar maxhodges avatar oliverlaz avatar sbekrin avatar scriptnull avatar walshyb avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

react-tweet-embed's Issues

show/hide media

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?

How to use this library in a React Native project

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 (received undefined). 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.

ID reserved word

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?

Error with class properties in IE 11

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.

'window.twittr' is not a sufficient check

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.

Firefox

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.

Provide a precompiled version or use vanilla JS

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.

not loading inside Cordova

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?

Feature request: text placeholder prop

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='¯\_(ツ)_/¯'/>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.