ts

twitter-status

Twitter Status Web Component

Showing:

Popularity

Downloads/wk

1.5K

GitHub Stars

48

Maintenance

Last Commit

1mo ago

Contributors

4

Package

Dependencies

4

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

<twitter-status>

Version Status macOS Build Status Linux Build Status Windows Build Status Dependency Status npm bundle size (minified + gzip)

Twitter Status Web Component

Examples

Live demo

Base example

Example

Example with attached image

Example with image

Example with hyperlinked hashtags/mentions/URLs and links colored from profile settings.

Example with image

Install

Load directly from unpkg:

<script async src="https://unpkg.com/twitter-status@latest/dist/twitter-status.min.js"></script>

Or installed as a dependency:

npm install twitter-status

And imported:

import 'twitter-status';

Polyfill

twitter-status relies on the shadow DOM and custom elements standards. You will likely need a polyfill until browser support is more ubiquitous.

Polyfills can be loaded via unpkg directly.

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2/bundles/webcomponents-sd-ce.js"></script>

Or installed as a dependency:

npm install @webcomponents/webcomponentsjs

And imported:

import '@webcomponents/webcomponentsjs/bundles/webcomponents-sd-ce';

Usage

<twitter-status> takes a single value status that must be the full response of GET statuses/show/:id with the parameters include_entities=true and tweet_mode=extended.

You can embed the tweet in the HTML as a JSON string:

<twitter-status status="{\"id_str\":\"20\",...}"></twitter-status>

Or set the property in JS:

<twitter-status></twitter-status>

<script>
  document.querySelector('twitter-status').status = { "id_str": "20", ... };
</script>

Theme

You can theme the borders. Here is an card example.

<style>
  twitter-status.card {
    box-shadow: 0 3px 4px 1px rgba(0, 0, 0, .08), 0 1px 1px 1px rgba(0, 0, 0, .05);
    border-radius: 2px;
    border-width: 0;
  }
</style>
<twitter-status class="card" status="{\"id_str\":\"20\",...}"></twitter-status>

Example with card edges

Reasons

Why use <twitter-status> instead of Twitter's embedded tweets?

  • Open source - If you don't like something about it you can customize it to fit your exact needs.
  • Lightweight
  • Security - You can perform a security audit of <twitter-status> and know exactly what you are shipping. You don't have to worry about loading Twitter's JavaScript.
  • Privacy - <twitter-status> only loads embedded images and videos from Twitter's CDN. You don't have to worry about loading Twitter's JavaScript.
  • Native web component - <twitter-status> is built with standardized web APIs that will work out of the box with most frameworks.
  • No framework dependancies - Because it's based on native web components, it does not have a dependency on Angular, React, or any other framework.
  • Custom URL handling (coming soon) - When a user click on a #hashtag, @mention, etc, you can configure it that they stay within your site.
  • Cached data - If you are a news organization or displaying tweets from politicians, you can continue displaying deleted tweets.
  • Well tested - <twitter-status> as a nice suit of tests to make sure everything continues to render correctly.

Limitations of <twitter-status>

  • Web component polyfills - Shadow DOM and custom elements are not supported in all browsers, if you are not already using web components the pollyfills may add additional data cost.
  • Twitter cards - Twitter fetches data about links and embeds those in tweets. The data is not available via the API so <twitter-status> does not have access.
  • Status object - <twitter-status> requires the full tweet object. If you only have an ID you'll have to make a request to the Twitter API before using the component.
  • Activity counts - Because the status objects may be stale, like, retweet, and reply counts are not displayed.
  • Open source - This project is not backed by any financing so work gets done as time permits. There are known status types that are not supported yet.

What other options are there?

<twitter-user>

Looking for a way to embed users? Check out <twitter-user>.

Notes

TwitterStatus is released under an MIT license.

TwitterStatus is not affiliated Twitter, Inc.

Built, tested, and published with Nutmeg.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial