# react-smart-embed

> Suspense ready embed component.

Latest version **0.2.2** (published 2020-01-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-smart-embed
pnpm add react-smart-embed
yarn add react-smart-embed
bun add react-smart-embed
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.2 |
| Published | 2020-01-20 |
| First published | 2020-01-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 56.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Luxizzle |
| Maintainers | luxizzle |

## Links

- npm: https://www.npmjs.com/package/react-smart-embed
- npm.io page: https://npm.io/package/react-smart-embed

## Dependencies (4)

- [swr](https://npm.io/package/swr.md) ^0.1.16
- [p-locate](https://npm.io/package/p-locate.md) ^4.1.0
- [isomorphic-fetch](https://npm.io/package/isomorphic-fetch.md) ^2.2.1
- [react-promise-suspense](https://npm.io/package/react-promise-suspense.md) ^0.3.2

## Recent versions

- 0.2.2 (latest) — 2020-01-20
- 0.2.1 — 2020-01-19
- 0.2.0 — 2020-01-19

## README

# 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

```js
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`](https://github.com/paulirish/lite-youtube-embed)?
- [ ] Better example
- [ ] Better documentation

---
_Source: https://npm.io/package/react-smart-embed · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._