I'm writing a documentation website based on React. I want to show the code that is necessary to use a given component from my framework. At the same time I would like to show the actual component running, like a side-by-side view.

Currently, I'm adding the component as a String for the reference implementation and the component as JSX for the running scenario. Something like this:

var ButtonDoc = React.createClass({
  render: function () {
    let buttonComponent = (
      <Button label="Add" />
    );

    let buttonCode = `<Button label="Add" />`;

    return (
      <div>
        {buttonComponent}
        <pre><code>{buttonCode}</code></pre>
      </div>
    );
  }
});

Question: Is there a way that I can get the string representation of the given React component without the need to replicate the code?

I'm expecting something like this:

var ButtonDoc = React.createClass({
  render: function () {
    let buttonComponent = (
      <Button label="Add" />
    );

    let buttonCode = `${buttonComponent}`;

    return (
      <div>
        {buttonComponent}
        <pre><code>{buttonCode}</code></pre>
      </div>
    );
  }
});

The output of the given code is object [object].

I'm writing a documentation website based on React. I want to show the code that is necessary to use a given component from my framework. At the same time I would like to show the actual component running, like a side-by-side view.

Currently, I'm adding the component as a String for the reference implementation and the component as JSX for the running scenario. Something like this:

var ButtonDoc = React.createClass({
  render: function () {
    let buttonComponent = (
      <Button label="Add" />
    );

    let buttonCode = `<Button label="Add" />`;

    return (
      <div>
        {buttonComponent}
        <pre><code>{buttonCode}</code></pre>
      </div>
    );
  }
});

Question: Is there a way that I can get the string representation of the given React component without the need to replicate the code?

I'm expecting something like this:

var ButtonDoc = React.createClass({
  render: function () {
    let buttonComponent = (
      <Button label="Add" />
    );

    let buttonCode = `${buttonComponent}`;

    return (
      <div>
        {buttonComponent}
        <pre><code>{buttonCode}</code></pre>
      </div>
    );
  }
});

The output of the given code is object [object].

• javascript
• reactjs

• Can you do some sort of ajax call and retrieve a script file as text/plain? However, if you're transpiling your JSX, it no longer looks like jsx... – ndugger Commented Nov 20, 2015 at 21:23
• Yeah, the idea is to be the exact representation that the user can easily copy and paste into his existing application. – Alan Souza Commented Nov 20, 2015 at 21:26

2 Answers 2

As I did not find anything that solved my problem, I ended up creating a npm repository to achieve this task.

https://github.com/alansouzati/jsx-to-string

Usage:

import React from 'react';
import jsxToString from 'jsx-to-string';

let Basic = React.createClass({
  render() {
    return (
      <div />
    );
  }
}); //this is your react component

console.log(jsxToString(<Basic test1="test" />)); //outputs: <Basic test1="test" />

This is super late but in case anyone read this half a decade later (React v17, Native 0.68), you can also just use curly braces inside of backticks: `${integerToString}`. This will convert your embedded value to string.