# @crystallize/reactjs-components 中文文档

规范地址：https://npmcn.com/package/%40crystallize/reactjs-components/

版本：5\.0\.0
npm 元数据更新时间：2025-10-03T16:50:13.941Z
中文译文更新时间：2026-11-11T06:24:49.828Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40crystallize/reactjs-components
原文对照：https://npmcn.com/package/%40crystallize/reactjs-components/?lang=original
源码仓库：https://github.com/CrystallizeAPI/reactjs-components

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：116 kB，48 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react \*，react-dom \*
- 首次发布：2022-04-22T18:45:40.226Z
- 最新版本发布：2025-10-03T16:50:13.461Z
- 近 30 天下载量：2939（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：24（近 12 个月 0 个）

## 中文简介

用于渲染 Crystalize 内容的被打出回放组件:图像,视频,网格和内容变形器.

## 安装

```sh
npm install @crystallize/reactjs-components
```

也可以使用：`pnpm add @crystallize/reactjs-components`、`yarn add @crystallize/reactjs-components`、`bun add @crystallize/reactjs-components`

## README

# 晶体化反应组件

用于渲染 Crystalize 内容的被打出回放组件:图像,视频,网格和内容变形器.

## 安装

使用您最喜欢的软件包管理器 :

```bash
# pnpm
pnpm add @crystallize/reactjs-components

# npm
npm install @crystallize/reactjs-components

# yarn
yarn add @crystallize/reactjs-components
```

所有组件都从包干和有TypeScript类型的飞船中导出.

```typescript
import { Image, Video, GridRenderer, GridRenderingType, ContentTransformer } from '@crystallize/reactjs-components';
```

## 图像

响应  包裹在一个有斜纹支撑. 从 Crystallize 传递图像对象 .

```typescript
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: '.../image@400.jpg', width: 400 },
        { url: '.../image@700.jpg', width: 700 },
        { url: '.../image@1000.webp', 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-组件/图像](https://crystallizeapi.github.io/libraries/reactjs-components/image)

## 视频

偏好HLS(m3u8)并倒回MPEG-DASH(mpd)的进取视频播放器. 渲染出一个缩略图和一个游戏按钮,然后给玩家水分.

重要

-   此组件仅为客户端( 它包含“ 使用客户端 ) 。 在Next.js中,将其放入客户端组件.
-   在您的应用程序中包含已提供的样式 :

```typescript
import '@crystallize/reactjs-components/assets/video/styles.css';
```

使用量

```typescript
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: '.../thumb@700.jpg', width: 700 }],
        },
    ],
};

export function HeroVideo() {
    return (
        <Video
            {...videoFromCrystallize}
            autoPlay
            muted
            controls
            className="hero-video"
            videoProps={{ playsInline: true }}
        />
    );
}
```

现场演示 : [https://crystallizeapi.github.io/librarys/reactjs-组件/视频](https://crystallizeapi.github.io/libraries/reactjs-components/video)

## 网格

在React中使用 CSS Grid(默认),语义表,或行/行包装来渲染网格.

通过 GraphQL 获取网格( 显示最小形状) :

```graphql
query grid($id: Int!, $language: String!) {
    grid(id: $id, language: $language) {
        rows {
            columns {
                layout {
                    rowspan
                    colspan
                    colIndex
                    rowIndex
                }
                item {
                    name
                }
            }
        }
    }
}
```

渲染器

```typescript
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

```tsx
<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-组件/网格](https://crystallizeapi.github.io/libraries/reactjs-components/grid)

## 内容变形器

Render Crystallize 将丰富的文本 JSON 以可选的每个节点覆盖重现元素.

```tsx
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-组件/内容-转换器](https://crystallizeapi.github.io/libraries/reactjs-components/content-transformer)

## 关于安全部门改革的说明

-   图像、网格和内容变形器都便于使用.
-   视频必须运行在客户端。 在 Next.js 中,将该用法输入客户端组件 .

## 许可证

麻省理工学院

## 常见问题

### @crystallize/reactjs-components 是什么？

用于渲染 Crystalize 内容的被打出回放组件:图像,视频,网格和内容变形器\.

### 如何安装 @crystallize/reactjs-components？

在项目目录运行 npm install @crystallize/reactjs-components，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\*）、react-dom（\*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @crystallize/reactjs-components 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @crystallize/reactjs-components 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @crystallize/reactjs-components 可以商用吗？

@crystallize/reactjs-components 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @crystallize/reactjs-components 的下载量有多少？

根据 npm 官方下载统计，@crystallize/reactjs-components 在 2026/10/11 – 2026/11/09 这 30 天内被下载 2,939 次，日均约 98 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @crystallize/reactjs-components 还在维护吗？

最新版本 5\.0\.0 发布于 2025/10/04（1\.1 年前）；至今共发布 24 个版本，其中过去 12 个月发布了 0 个；首次发布于 2022/04/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。