react playground

node 版本 24.x（Vercel 文档站构建）

Changelog · Report Bug · Request Feature

简介

这是 react playground, 用于在线演示 react 组件。

vue 请参考: Vue SFC Playground

快速上手

安装

推荐使用 pnpm 安装

pnpm i ims-playground antd @ant-design/icons lodash

peer 依赖：react、react-dom、antd、@ant-design/icons、lodash

使用

import { Playground, PlaygroundProvider } from 'ims-playground';

export default function App() {
  return (
    <PlaygroundProvider>
      <Playground />
    </PlaygroundProvider>
  );
}

自定义初始文件（initialFiles 优先于 URL hash；不传时仍可读 hash 分享）：

import { Playground, PlaygroundProvider, initFiles } from 'ims-playground';
import type { Files } from 'ims-playground';

const files: Files = {
  ...initFiles,
  'App.tsx': {
    name: 'App.tsx',
    language: 'typescript',
    value: `/* 你的初始代码 */`,
  },
};

export default function App() {
  return (
    <PlaygroundProvider initialFiles={files}>
      <Playground />
    </PlaygroundProvider>
  );
}

组件内部会引入 allotment 样式与 playground less/css，确保构建工具能处理 CSS / Less。

更新记录

详情：CHANGELOG

🤝 Contributing

📊 Total: 1

📝 License

Copyright © 2020 - present eternallycyf. This project is MIT licensed.