晶体化反应组件
用于渲染 Crystalize 内容的被打出回放组件:图像,视频,网格和内容变形器.
安装
使用您最喜欢的软件包管理器 :
# pnpm
pnpm add @crystallize/reactjs-components
# npm
npm install @crystallize/reactjs-components
# yarn
yarn add @crystallize/reactjs-components
所有组件都从包干和有TypeScript类型的飞船中导出.
import { Image, Video, GridRenderer, GridRenderingType, ContentTransformer } from '@crystallize/reactjs-components';
图像
响应 包裹在一个有斜纹支撑. 从 Crystallize 传递图像对象 .
import { Image } from '@crystallize/reactjs-components';
const imageFromCrystallize = {
url: 'https://media.crystallize.com/.../image.jpg',
altText: 'A nice product',
variants: [
// ImageVariant[] from @crystallize/schema
{ url: '.../[email protected]', width: 400 },
{ url: '.../[email protected]', width: 700 },
{ url: '.../[email protected]', width: 1000 },
],
};
export function ProductImage() {
return <Image {...imageFromCrystallize} sizes="(max-width: 600px) 90vw, 700px" className="product-image" />;
}
页:1
- 如果 API 返回 json/html/ PlainText 中的标题,则组件将它变成
。 。 。 . - 可以提供宽度/高度来避免布局转变;否则在可用时会使用最大的变体尺寸.
现场演示 : https://crystallizeapi.github.io/librarys/reactjs-组件/图像
视频
偏好HLS(m3u8)并倒回MPEG-DASH(mpd)的进取视频播放器. 渲染出一个缩略图和一个游戏按钮,然后给玩家水分.
重要
- 此组件仅为客户端( 它包含“ 使用客户端 ) 。 在Next.js中,将其放入客户端组件.
- 在您的应用程序中包含已提供的样式 :
import '@crystallize/reactjs-components/assets/video/styles.css';
使用量
import { Video } from '@crystallize/reactjs-components';
const videoFromCrystallize = {
playlists: ['https://media.crystallize.com/.../master.m3u8', 'https://media.crystallize.com/.../stream.mpd'],
thumbnails: [
{
url: 'https://media.crystallize.com/.../thumb.jpg',
variants: [{ url: '.../[email protected]', width: 700 }],
},
],
};
export function HeroVideo() {
return (
<Video
{...videoFromCrystallize}
autoPlay
muted
controls
className="hero-video"
videoProps={{ playsInline: true }}
/>
);
}
现场演示 : https://crystallizeapi.github.io/librarys/reactjs-组件/视频
网格
在React中使用 CSS Grid(默认),语义表,或行/行包装来渲染网格.
通过 GraphQL 获取网格( 显示最小形状) :
query grid($id: Int!, $language: String!) {
grid(id: $id, language: $language) {
rows {
columns {
layout {
rowspan
colspan
colIndex
rowIndex
}
item {
name
}
}
}
}
}
渲染器
import { GridRenderer, GridRenderingType } from '@crystallize/reactjs-components';
const Cell = ({ cell }: { cell: any }) => <div>{cell.item?.name}</div>;
<>
{/* CSS Grid */}
<GridRenderer grid={grid} type={GridRenderingType.Div} cellComponent={Cell} />
{/* Table */}
<GridRenderer grid={grid} type={GridRenderingType.Table} cellComponent={Cell} />
{/* Row/Col wrappers */}
<GridRenderer grid={grid} type={GridRenderingType.RowCol} cellComponent={Cell} />
</>;
通过渲染道具或样式自定义每个单元格ForCell
<GridRenderer grid={grid} type={GridRenderingType.Div} cellComponent={Cell}>
{({ cells }) =>
cells.map((cell) => (
<div
key={`${cell.layout.rowIndex}-${cell.layout.colIndex}`}
style={{ gridColumn: `span ${cell.layout.colspan}`, gridRow: `span ${cell.layout.rowspan}` }}
>
{cell.item.name}
</div>
))
}
</GridRenderer>
现场演示 : https://crystallizeapi.github.io/librarys/reactjs-组件/网格
内容变形器
Render Crystallize 将丰富的文本 JSON 以可选的每个节点覆盖重现元素.
import { ContentTransformer, NodeContent, type Overrides, type NodeProps } from '@crystallize/reactjs-components';
const overrides: Overrides = {
link: (props: NodeProps) => (
<a href={props.metadata?.href} rel={props.metadata?.rel} target={props.metadata?.target}>
<NodeContent {...props} />
</a>
),
};
<ContentTransformer json={richTextJson} overrides={overrides} />;
现场演示 : https://crystallizeapi.github.io/librarys/reactjs-组件/内容-转换器
关于安全部门改革的说明
- 图像、网格和内容变形器都便于使用.
- 视频必须运行在客户端。 在 Next.js 中,将该用法输入客户端组件 .
许可证
麻省理工学院