{"id":16908116,"url":"https://github.com/dream2023/react-schema-render","last_synced_at":"2025-03-23T17:30:42.405Z","repository":{"id":57344062,"uuid":"341220364","full_name":"dream2023/react-schema-render","owner":"dream2023","description":"react-schema-render 是一个通用型 schema 转 React 组件的工具组件。","archived":false,"fork":false,"pushed_at":"2021-04-27T02:07:49.000Z","size":3494,"stargazers_count":18,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-31T15:26:37.174Z","etag":null,"topics":["json-schema","react","react-schema-render","render","renderer","schema","schema-renderer"],"latest_commit_sha":null,"homepage":"https://dream2023.gitee.io/react-schema-render","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dream2023.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-02-22T14:05:00.000Z","updated_at":"2023-11-28T12:49:59.000Z","dependencies_parsed_at":"2022-09-12T06:30:41.923Z","dependency_job_id":null,"html_url":"https://github.com/dream2023/react-schema-render","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Freact-schema-render","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Freact-schema-render/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Freact-schema-render/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Freact-schema-render/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dream2023","download_url":"https://codeload.github.com/dream2023/react-schema-render/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245140698,"owners_count":20567430,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["json-schema","react","react-schema-render","render","renderer","schema","schema-renderer"],"created_at":"2024-10-13T18:50:13.466Z","updated_at":"2025-03-23T17:30:42.102Z","avatar_url":"https://github.com/dream2023.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003ereact-schema-render\u003c/h1\u003e\n\n![npm version](https://img.shields.io/npm/v/react-schema-render?style=for-the-badge)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-schema-render?style=for-the-badge)\n![Codecov](https://img.shields.io/codecov/c/github/dream2023/react-schema-render?style=for-the-badge)\n![npm downloads](https://img.shields.io/npm/dt/react-schema-render?style=for-the-badge)\n![NPM](https://img.shields.io/npm/l/react-schema-render?style=for-the-badge)\n\n## Introduction\n\n`react-schema-render` 是一个通用型 schema 转 React 组件的工具组件。其遵守 [Schema To React](https://dream2023.gitee.io/react-schema-render/规范) 规范。\n\n## Feature\n\n- 体积小：仅 3kb；\n- 功能强：支持数组解析、深度嵌套、混合渲染等；\n- 扩展性高：支持自定义解析器、装饰器；\n- 侵入性低：无需对已有组件做任何更改即可接入；\n- 稳定性高：测试覆盖率 100%。\n\n## Quick Started\n\n**第 1 步：安装**\n\n```bash\nyarn add react-schema-render # npm install react-schema-render -S\n```\n\n**第 2 步：建立组件映射关系**\n\n我们以 `ant-design` 的 [carousel](https://ant.design/components/carousel-cn/) 作为示例（只是为了好看，其和具体的 UI 库**无关**）。\n\n```bash\n# yarn add antd\n```\n\n```js\nimport { Collapse } from 'antd';\nconst { Panel } = Collapse;\n\nconst components = {\n  collapse: Collapse,\n  panel: Panel,\n};\n```\n\n**第 3 步：传递映射关系**\n\n```js\nimport { setComponents } from 'react-schema-render';\nsetComponents(components);\n```\n\n**第 4 步：定义 schema**\n\n```jsx\nconst schema = {\n  // component 代表组件\n  component: 'collapse',\n  // 其他属性为 component 对应的属性\n  defaultActiveKey: ['1'],\n  // children 支持深度嵌套\n  children: [\n    {\n      component: 'panel',\n      header: '《出塞》',\n      key: '1',\n      // children 为字符串\n      children:\n        '秦时明月汉时关，万里长征人未还。但使龙城飞将在，不教胡马度阴山。',\n    },\n    {\n      component: 'panel',\n      header: '《寻隐者不遇》',\n      key: '2',\n      // children 为 jsx\n      children: (\n        \u003c\u003e\n          \u003cp\u003e松下问童子，言师采药去。\u003c/p\u003e\n          \u003cp\u003e只在此山中，云深不知处。\u003c/p\u003e\n        \u003c/\u003e\n      ),\n    },\n    {\n      component: 'panel',\n      header: '《凉州词》',\n      key: '3',\n      // children 为 schema 数组\n      children: [\n        {\n          component: 'p',\n          key: 1,\n          children: '葡萄美酒夜光杯，欲饮琵琶马上催。',\n        },\n        {\n          component: 'p',\n          key: 2,\n          children: '醉卧沙场君莫笑，古来征战几人回？',\n        },\n      ],\n    },\n  ],\n};\n```\n\n**第 5 步：使用**\n\n```js\nimport { SchemaRender } from 'react-schema-render';\n\n\u003cSchemaRender schema={schema}\u003e\u003c/SchemaRender\u003e;\n```\n\n完成 Demo：\n\n```jsx\nimport React from 'react';\nimport { Collapse } from 'antd';\nimport { setComponents, SchemaRender } from 'react-schema-render';\n\nconst { Panel } = Collapse;\nconst components = {\n  collapse: Collapse,\n  panel: Panel,\n};\n\nsetComponents(components);\n\nconst App = () =\u003e {\n  const schema = {\n    component: 'collapse',\n    defaultActiveKey: ['1'],\n    children: [\n      {\n        component: 'panel',\n        header: '《出塞》',\n        key: '1',\n        // children 为字符串\n        children:\n          '秦时明月汉时关，万里长征人未还。但使龙城飞将在，不教胡马度阴山。',\n      },\n      {\n        component: 'panel',\n        header: '《寻隐者不遇》',\n        key: '2',\n        // children 为 jsx\n        children: (\n          \u003c\u003e\n            \u003cp\u003e松下问童子，言师采药去。\u003c/p\u003e\n            \u003cp\u003e只在此山中，云深不知处。\u003c/p\u003e\n          \u003c/\u003e\n        ),\n      },\n      {\n        component: 'panel',\n        header: '《凉州词》',\n        key: '3',\n        // children 为 schema 数组\n        children: [\n          {\n            component: 'p',\n            key: 1,\n            children: '葡萄美酒夜光杯，欲饮琵琶马上催。',\n          },\n          {\n            component: 'p',\n            key: 2,\n            children: '醉卧沙场君莫笑，古来征战几人回？',\n          },\n        ],\n      },\n    ],\n  };\n\n  return \u003cSchemaRender schema={schema}\u003e\u003c/SchemaRender\u003e;\n};\n\nexport default App;\n```\n\n[![demo](./demo.png)](https://dream2023.gitee.io/react-schema-render/)\n\n## Docs \u0026 Demo\n\n更多功能演示和 API 说明，请参见文档：\n\n[https://dream2023.gitee.io/react-schema-render](https://dream2023.gitee.io/react-schema-render)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdream2023%2Freact-schema-render","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdream2023%2Freact-schema-render","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdream2023%2Freact-schema-render/lists"}