babel-plugin-react-element-to-jsx-string

Turn a ReactElement into the corresponding JSX string at build time.

Table of Contents

• Example
• Install
• Usage
• Contribute
• License

Example

Mark your React Component with the comment /* react-element-to-jsx-string */:

import React from 'react';

/* react-element-to-jsx-string */
const Article = ({ title, content }) => (
  <article>
    <h1>{title}</h1>
    <p>{content}</p>
  </article>
);

export default Article;

And the JSX as string will be added next to your React Component:

import React from 'react';

/* react-element-to-jsx-string */
const Article = ({ title, content }) => (
  <article>
    <h1>{title}</h1>
    <p>{content}</p>
  </article>
);
Article.jsxString = "<article>\n  <h1>{title}</h1>\n  <p>{content}</p>\n</article>";

export default Article;

Install

Node.js v8 or newer is required.

Via the yarn client:

$ yarn add --dev babel-plugin-react-element-to-jsx-string

Via the npm client:

$ npm install --save-dev babel-plugin-react-element-to-jsx-string

Usage

1. Add to your babel config this plugin:

{
  "plugins": ["babel-plugin-react-element-to-jsx-string"]
}

2. Add before a React Component a comment with /* react-element-to-jsx-string */, and the first JSX code will be added as string in a property called jsxString.

3. What about changing the default property name? That can be done in two ways:

• Via the flag comment:

/* react-element-to-jsx-string: fooBar */

• Via the plugin options:

{
  "plugins": [["babel-plugin-react-element-to-jsx-string", { "id": "fooBar" }]]
}

Contribute

Feel free to dive in! Open an issue or submit PRs.

babel-plugin-react-element-to-jsx-string follows the Contributor Covenant Code of Conduct.

License

MIT