Code Ouput for docz

CodeOutput.jsx

// @flow
import React from 'react';
import SyntaxHighlighter from 'react-syntax-highlighter/prism';
import { dark } from 'react-syntax-highlighter/styles/prism';
import { renderToStaticMarkup } from 'react-dom/server';
import pretty from 'pretty';
import jsxToString from 'jsx-to-string';

type Props = { children: any, showReact?: boolean, showHTML?: boolean, showIcon?: boolean };
type State = { active: number };

class CodeOutput extends React.Component<Props, State> {
    state = { active: 1 }
    displayName="CodeOutput";

    render () {
        const { active } = this.state;
        const { children, showReact=true, showHTML=true, showIcon=true } = this.props;

        return (
            <div>
                <div className="tabs">
                    <ul>
                        { showReact && <li className={ active === 1 && "is-active" }><a onClick={() => this.setState({ active: 1 })}>React</a></li> }
                        { showHTML && <li className={ active === 2 && "is-active" }><a onClick={() => this.setState({ active: 2 })}>HTML</a> </li> }
                    </ul>
                </div>
                { showIcon && this.props.children}
                { active === 1 && showReact && <SyntaxHighlighter language="jsx" style={dark}>{ Array.isArray(children) ? children.map(child => jsxToString(child)).join('\n') : jsxToString(children) }</SyntaxHighlighter> }
                { active === 2 && showHTML && <SyntaxHighlighter language="html" style={dark}>{ pretty(renderToStaticMarkup(children)) } </SyntaxHighlighter>}

            </div>
        )
    }
}

export default CodeOutput;

usage.mdx

name	route
Button	/button

import Button from './Button.jsx' import CodeOutput from '../helpers/CodeOutput.jsx';

Button

Basic Example