0.2.2 • Published 4 years ago
react-smart-embed v0.2.2
React Smart Embed
Suspense ready embed component.
"Smart" as in it supports multiple platforms and is able to resolve the type of platform on its own.
Install
Install using npm:
$ npm i react-smart-embed
Or install using yarn:
$ yarn add react-smart-embed
Usage
import React, { Suspense } from 'react';
import {
Embed,
DirectImage,
ImgurGif,
ImgurImage,
Gfycat,
} from 'react-smart-embed';
function Component() {
return (
<div>
<Suspense fallback={<p>Loading...</p>}>
<Embed
platforms={[ImgurGif, ImgurImage, DirectImage, Gfycat]}
src="https://gfycat.com/speedyyellowkestrel"
/>
</Suspense>
</div>
);
}
The example above should render a video
element with the an mp4 source of the given gfycat source.
Platforms are objects with an isPlatform
function and an EmbedComponent
function.
Platform.isPlatform
Should return a boolean or a promise that resolves to a boolean. If true, indicates that this platform supports the given url.
Platform.EmbedComponent
A component that should render the given url as an image, video, youtube embed, etc..
This module already has a few supported platforms:
DirectImage
Supports any url ending with an image extension.Gfycat
Gfycat gifs as mp4 videos.ImgurGif
Imgur gifs as mp4 videos.ImgurImage
Imgure images.RedditImage
Images fromi.redd.it
if you want finer control over supported platforms and dont want to useDirectImage
Do you have ideas for more supported platforms? Make an issue and/or pull request!
Roadmap
- Add tests
- Add more platforms
RedditVideo
supportv.redd.it
Youtube
support youtube embedsYoutubeLite
supportlite-youtube
?
- Better example
- Better documentation