1.1.3 • Published 7 years ago
react-tube-embed v1.1.3
React Tube Embed
ReactJS library for embed Tube video's in your React application.
Usage
Load media directly into your ReactJS application by using the TubeEmbed
tag. Pass an URL or text with an url in it (or not, I won't mind) in the src
prop. The rest will be handled by the component. See the examples below for more details and other usefull functions.
An div will be return with the class tube-embed
. You can still use the className
and style
prop for adding custom styling. Within the div will be the embedding media, in most cases this will be an iframe depending on the media source. Some sources such as Giphy this will be an img tag. Styling has to be done by yourself.
Supported tubes
- Youtube
- Vimeo
- Dailymotion
- Spotify
- Giphy
Feel free to request more tubes.
ES6 Examples
Embedding ...
import TubeEmbed from 'react-tube-embed';
...
<TubeEmbed src="https://www.youtube.com/watch?v=lmc21V-zBq0" />
<TubeEmbed src="https://youtu.be/lmc21V-zBq0" />
<TubeEmbed src="Check this, https://youtu.be/lmc21V-zBq0 :D!" />
<TubeEmbed src="https://vimeo.com/42615527" />
<TubeEmbed src="Hello World, I will be ignored!" />
<TubeEmbed src="http://www.dailymotion.com/video/x11jxof" />
<TubeEmbed src="https://giphy.com/gifs/happy-smile-P8MxmGnjmytws/" />
<TubeEmbed src="Some good jams https://open.spotify.com/user/spotify/playlist/37i9dQZF1DWWrJKwf0q9nn" />
Other functions ...
import TubeEmbed, {
stripURL,
stripText,
hasURL,
parseMediaURL
} from 'react-tube-embed';
...
let text = "Check this video! https://www.youtube.com/watch?v=lmc21V-zBq0 It's awesome!";
let textWithoutURL = stripURL (text);
let urlWithoutText = stripText (text);
let textHasValidURL = hasURL (text);
let mediaData = parseMediaURL (text);