npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-twitch-embed

v3.0.2

Published

A collection of components to embed Twitch.

Downloads

6,735

Readme

ci-build-status issues bundle-size version downloads-week downloads-total

react-twitch-embed

A collection of components to embed Twitch.

For more information, visit the Embedding Twitch documentation page.

Make sure to check out the Demo and Documentation page for more information on the usage of the components, alongside a description on all the supported props for each component.

Installation

npm install react-twitch-embed

A Note on Typings

This package includes some typings for the Embed and Player constructors that are downloaded automatically into the browser's window object. These are unofficial typings that I made empirically, some of them might not be accurate.

The documentation on Twitch's official page is incomplete in various aspects, and a lot of the functionality included in this package was found by arbitrarily and through trial and error.

If you find any inconsistency with the typings provided by this package, feel free to open a Pull Request.

A Note on the parent Prop

Twitch requires that any embeds include the URL of the parent site that embeds their content. These components will get this parent URL through window.location.hostname for non-interactive components (those components that are essentially just an iframe), while the interactive ones get the parent automatically (possible through the same property) by their respective constructor.

As such, you shouldn't need to specify this prop for any of the components, unless you run a particular setup with multiple domains.

FAQ

  • Between TwitchEmbed, TwitchPlayer and TwitchPlayerNonInteractive, which component should I choose?

Out of these components, TwitchEmbed and TwitchPlayer are both interactive components, meaning that they expose the internal instance through their respective events. Both of these components support streams, VODs and collections, and they both react efficiently when their channel, video, or collection props change by using the internal API instead of recreating the embed when they change. The key difference is that TwitchEmbed can include the live chat on streams. At the end of the day, it depends on which one you prefer.

As for TwitchPlayerNonInteractive, this component can embed streams, VODs and collections too, but it does not include an internal API. This means that channel, video or collection switching is not "smooth" and will recreate the embed. However, this component does not download anything extra, it does not create any additional nodes on the body document, so it is probably less resource heavy.

  • Why are there TwitchClip and TwitchPlayer?

TwitchClip will only work for clips whereasTwitchPlayer will work for VODs, collections and streams.

  • I'm using multiple embeds simultaneously, why are they sticking next to each other?

In the case of TwichEmbed and TwitchPlayer, these components need an id prop to work because the internal API mounts its respective iframe inside a div queried by its id. These components will use a default id if it's not provided in their props. If you're displaying multiple embeds simultaneously then you should provide a static id. Try not to use the name of the channel as an id because in the case that this prop changes, the embed will be recreated and the internal API won't be used for the channel switching.

  • What does smooth switching mean?

For the TwitchEmbed and TwitchPlayer components, when updating their channel, video and/or collection props, the player will not be recreated and instead the internal API will be used to update this data.

Testing

You can run the tests for this package by running:

npm test

Or leave the watcher running with:

npm run test:watch

Developing

When developing, you can use Storybook as a way to check the components and test them. You can run the Storybook server with:

npm run storybook:serve

Also, make sure that your code is linter properly with:

npm run lint

Author

This component package was made by moonstar-x.