https://github.com/gem-mine/docsify-react-live

https://github.com/gem-mine/docsify-react-live

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/gem-mine/docsify-react-live
• Owner: gem-mine
• Created: 2019-11-16T12:52:48.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-04-19T04:01:31.000Z (almost 2 years ago)
• Last Synced: 2024-04-13T19:06:05.046Z (9 months ago)
• Language: JavaScript
• Size: 2.84 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# docsify-react-live

提供react组件的实时渲染和实时编辑

## QuickStart

```js

window.$docsify = {

  plugins: [

    (function () {

      return ReactLiveBox.create(scope, theme)

    })()

  ],

}

```

- scope 传递入react组件的局部遍历，如果使用`UMD`包，此处无需传入

- theme `prismjs`主题对象，更为方便的方法是用`prismjs`的css主题

代码块中如下编写

```

/* react live */

demo-class

测试组件标题

测试组件标题

- 测试

  body {

    height: 30px;

  }

const { Button } = soui

export default class App extends React.Component {

  render () {

    return <Button type="primary" onClick={() => alert('好的')}>确认</Button>

  }

}

.body {

  height: 100px;

}

```

- /* react live */ 表示是否要实时编辑

- /* react pureRender */ 表示只渲染

- className 生成的HTML中额外加入的className

- style 额外注入全局的样式

- script 代码内容

- desc 描述，可用`MarkDown`语法

- css 用于script下方额外显示的CSS内容