njleonzhang / docsify-demo-box-react

write React jsx demo in docsify with instant preview and jsfiddle integration

docsify-demo-box-react

write React jsx demo in docsify with instant preview and jsfiddle integration

Your sample code can be rendered on the page instantly, so the people who read your document can see the preview immediately. If he/she expands the demo box, the source code and description are shown there. Click the button Try in Jsfiddle, jsfiddle.net will be open with the code of this sample.

Doc

This plugin is for React. For Vue, please use docsify-demo-box-vue

Showcase

These projects are using docsify-demo-box-react. Pull requests welcome 😊

Project	Description
soui-react	Soda UI Components for React

docsify-demo-box-react's Issues

import and export may only appear at the top level

我希望使用react展现自己封装的组件的示例，于是在 md文件中这样写：

<desc>
    ...
</desc>
<style>
    ...
</style>
<script>
    import Counter from './h5/components/counter';
    export default class Application extends React.Component {
         ...
    }
</script>

页面上提示：Uncaught SyntaxError: unknown: 'import' and 'export' may only appear at the top level

原因是import被一个匿名函数包起来了：(function() { import Counter from ... })

请问这个问题怎么解决？难道不能用import吗？谢谢🙏

demo-box disapper after swtiching markdown files

docsify-demo-box-react/src/plugin/index.js

Line 15 in 5ca08e3

code: function(code, lang) {

It seem the renderer.code doesn't execute after switching files.

class如何添加

你的demo中给出了class的使用，
但是如何定义class呢？ 没有class只有style在演示动画的时候很难受。

export default class Application extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
      }
    }

    render() {
      return (
        <div>
          <div className="box">
            位移动画
          </div>
        </div>
      )
    }
  }

如上，我如何定义box类呢？ 现在的做法是定义在index.html中（全局的），

这样不好，一方面是全局的，容易冲突。

另一方面，我展开代码的时候，看不到这部分class的定义，难受。

does component cache really works?

it render components from cache when router change

hook.mounted(function() {
      // Called after initial completion. Only trigger once, no arguments.
      vm.router.onchange(() => {
        components.renderFromCache()
      })
    })
)

but id always +1 and never the the same

id++

Can react version update to greater than 16.8?

I'd like to use function component in 16.8 React version.

Look forward to your publish new version