react-code-toggle

A react component that renders its children with JSX and HTML code blocks that can be toggled.

Demo

Installation

$ npm install react-code-toggle --save

Usage

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>

Additional options

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.

Mangled component names

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
        }
      })
    ]
    ...

Alternatives

• React Styleguidist (using markdown)
• component-playground (using props: raw component code + scope)
• React Component Demo (using props: component and its props)

Dependencies

• react-codemirror2
• jsx-to-string
• pretty
• prop-types