react-smart-embed

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 from i.redd.it if you want finer control over supported platforms and dont want to use DirectImage

Do you have ideas for more supported platforms? Make an issue and/or pull request!

Roadmap

• Add tests
• Add more platforms
  • RedditVideo support v.redd.it
  • Youtube support youtube embeds
  • YoutubeLite support lite-youtube?
• Better example
• Better documentation