@bbc/psammead-oembed

⛔️ This is an alpha component ⛔️

This component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.

psammead-oembed -

Description

The OEmbed component sanitizes and renders the HTML from an oEmbed response.

Installation

npm install @bbc/psammead-oembed --save

Props

Argument	Type	Required	Default	Example
oEmbed	Object	Yes	n/a	See below.

oEmbed

Argument	Type	Required	Default	Example
html	String	Yes	n/a	<p>Hello, World!</p>

Usage

import OEmbed from "@bbc/psammead-oembed"

const oEmbedResponse = {
  "url": "https://twitter.com/SonyPictures/status/1164036827667238912",
  "author_name": "Sony Pictures",
  "author_url": "https://twitter.com/SonyPictures",
  "html": "<blockquote class=\"twitter-tweet\"><p lang=\"en\" dir=\"ltr\">Much of today’s news about Spider-Man has mischaracterized recent discussions about Kevin Feige’s involvement in the franchise. We are disappointed, but respect Disney’s decision not to have him continue as a lead producer of our next live action Spider-Man film. (1/3)</p>&mdash; Sony Pictures (@SonyPictures) <a href=\"https://twitter.com/SonyPictures/status/1164036827667238912?ref_src=twsrc%5Etfw\">August 21, 2019</a></blockquote>",
  "width": 550,
  "height": null,
  "type": "rich",
  "cache_age": "3153600000",
  "provider_name": "Twitter",
  "provider_url": "https://twitter.com",
  "version": "1.0"
};

<OEmbed oEmbed={oEmbedResponse} />

When to use this component

This component should be used within components that render the HTML from oEmbed responses.

When not to use this component

This component should not be used on its own. It should be used within in a parent component that adheres to the necessary UX and accessibility requirements.

Accessibility notes

See above.

Roadmap

There are no known future changes to this component.

Sanitization

Sanitization is performed using DOMPurify, a modern HTML sanitization library. Version 2.0.8 weighs 6.5kB (minified and gzipped). See its Security Goals & Threat Model.

Contributing

Psammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at the root of the Psammead repository.

Code of Conduct

We welcome feedback and help on this work. By participating in this project, you agree to abide by the code of conduct. Please take a moment to read it.

License

Psammead is Apache 2.0 licensed.