Display Embedly in contentful rich document with React Hooks
Developer's perspective We use Embedly to display external content. To show Embedly cards in your sites and apps, you should use the relevant libraries provided by Embedly. See the documentation for more information.
$ npm install react-contentful-embedly
$ yarn add react-contentful-embedly
import React from 'react'
import { useEmbedly, EmbedlyAttributes } from 'react-contentful-embedly'
import { documentToReactComponents } from '@contentful/rich-text-react-renderer'
import { Document } from '@contentful/rich-text-types'
const Component = () => {
const attributes: EmbedlyAttributes = { align: 'left' }
const option = useEmbedly(attributes)
// Or `const option = useEmbedly({ align: 'left' })`
const documentIncludesEmbedly: Document = {
nodeType: 'document',
data: {},
content: [
{
nodeType: 'paragraph',
data: {},
content: [
{
nodeType: 'text',
value:
'Embedded content: https://www.youtube.com/watch?v=Sa4DYkIEzz8',
marks: [],
data: {}
}
]
}
]
}
return <div>{documentToReactComponents(documentIncludesEmbedly, option)}</div>
}Result (Screenshot):
(attributes: EmbedlyAttributes) => Options
You can get Options for @contentful/rich-text-react-renderer and install package to render embedly.
Type of Embedly card attributes.
{
via?: string
chrome?: '0' | '1'
theme?: 'light' | 'black'
image?: string
embed?: string
controls?: '0' | '1'
width?: string
align?: 'left' | 'center' | 'right'
recommend?: '0' | '1'
key?: string
}Ref: Cards · Embedly Documentation
MIT © saitoeku3