@kne/markdown-components-render v0.1.3

markdown-components-render

描述

渲染markdown文本，支持components.

安装

npm i --save @kne/markdown-components-render

概述

用于将一个yml格式的数据展示为一个已经定义好的react组件

如下的yml会被渲染为Card组件

\`\`\`yml
md-components:
  type: Card
  props:
    title: 我是标题
    size: small
    children: 我是内容
\`\`\`

如果需要传入参数，可以$开头

\`\`\`yml
md-components:
  type: Button
  props:
    type: primary
    children: 我是一个按钮
    onClick: $onClick
\`\`\`

示例

示例样式

.ant-card {
  border-color: black;
  text-align: center;
  width: 200px;
}

示例代码

• 这里填写示例标题
• 这里填写示例说明
• _MarkdownComponentsRender(@kne/current-lib_markdown-components-render)import * as _MarkdownComponentsRender from "@kne/markdown-components-render",antd(antd),_ReactFetch(@kne/react-fetch),md(./doc/example.md)

const { default: MarkdownComponentsRender } = _MarkdownComponentsRender;
const { default: mdUrl } = md;
const { default: Fetch } = _ReactFetch;
const { Card, Button, App } = antd;

const BaseExample = () => {
  const { message } = App.useApp();
  return (
    <Fetch
      url={mdUrl}
      ignoreSuccessState
      render={({ data }) => {
        return (
          <MarkdownComponentsRender
            components={{ Card, Button }}
            variables={{
              onClick: () => {
                message.info('你好');
              }
            }}>
            {data}
          </MarkdownComponentsRender>
        );
      }}></Fetch>
  );
};

render(<BaseExample />);

API