Article text here
}>
{ post.title.rendered }
React container for locating and injecting oembed scripts in string content.
npm install react-oembed-containerThis package provides a React component wrapper to handle detecting and injecting script tags within HTML string content.
Content management system API endpoints like those in WordPress often return editorial content as HTML strings rather than structured data. dangerouslySetInnerHTML is required to properly render this HTML content within a React application, or else any markup embedded in that string will not display properly.
Post content however may _also_ include
These oEmbed HTML responses may not contain any scripts. If so, great! React can render that easily. But if they do, they will either contain script tags with
attributes pointing at an external JavaScript file (as in the twitter example above), or else an inline In order to properly display inlined oEmbed content, we need to detect and inject both types of scripts.
A Note on Security
Technically what we're doing here is permitting arbitrary scripts injected into API responses to be rendered on the front-end of your site: under certain circumstances this can pose a security risk. However, these scripts would be rendered normally when loading this same markup from the server in a more traditional CMS-driven webpage rendering context.
It is up to the CMS to ensure that any scripts which make it far enough to be output on the page (or in API responses) are properly whitelisted or sanitized as necessary. Using WordPress as an example, only the responses from whitelisted oEmbed providers or content from highly authorized users may contain scripts at all; we therefore assume that any scripts inlined within the returned content are integral to the rendering of that content and should be loaded accordingly.
Installation
npm install --save react-oembed-container
This library has peerdependencies on
and react v16. If you do not already have these in your project, run`
npm install --save react react-dom
Usage
Import the container element into your React component:
js
import EmbedContainer from 'react-oembed-container';
`Then use this container to wrap whatever JSX you would normally use to render the content:
js
render() {
const { post } = this.props;
return (
{/ for example, /}
post-${post.id}}>
{ post.title.rendered }
);
}
`If you set a
on the EmbedContainer component, that class will be passed through to the rendered container:`js
render() {
const { post } = this.props;
return (
markup={post.content.rendered}
>
Article text here
);
}
`
yields
html
Article text here
`Local Development
Run
to pull down the dependencies for local development. Linting with ESLint is handled through npm run lint, and the Jest tests are run with npm test.npm link to bring it into another project for testing or else run npm run storybook` within this repository to spin up a Storybook UI development environment. This environment should be available locally at localhost:6006.