A react component that renders its children with JSX and HTML code blocks that can be toggled.
$ npm install react-code-toggle --save
import CodeToggle from 'react-code-toggle';
And simply wrap your React components in <CodeToggle>
:
<CodeToggle>
<YourComponent someProp="hi" doIt={this.doesSomething()} />
<AnotherComponent>
<WhatEverYouLike />
</AnotherComponent>
</CodeToggle>
It will render your components with two additional toggle buttons used to show or hide highlighted code blocks, one for JSX and another one for the resulting HTML.
You can also overwrite code outputs using props:
<CodeToggle
jsxCode={'<BeautifulButton>Hi</BeautifulButton>'}
htmlCode={'<button class="beautiful-button">Hi<button>'}
>
<UglyButton>Hi<UglyButton>
</CodeToggle>
By default, HTML is formatted using pretty. You can pass your own beautifier using props:
<CodeToggle
htmlBeautifier={this.myCustomHtmlBeautifier}
jsxBeautifier={this.myCustomJsxBeautifier}
>
<MyComponent />
</CodeToggle>
This component uses CodeMirror to render code blocks. If you wish to change its theme or configuration, use htmlOptions
and/or jsxOptions
props to pass CodeMirror specific options. Don't forget to include the right CSS file when changing theme. Default theme for this component is monokai.
Please note that this component is intended to be somewhat lightweight and doesn't include Babel or any other script to live-transpile JSX for your living examples, even when enabling CodeMirror's editing features. But if that's what you are looking for, check out the alternatives mentioned at the bottom.
If you encounter mangled component names, tell your uglifier to not mangle function names.
Example for Webpack config:
...
plugins: [
...
new webpack.optimize.UglifyJsPlugin({
mangle: {
keep_fnames: true
}
})
]
...