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

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
babel-plugin-react-element-to-jsx-string
101.0.0-beta.14 years ago4 years agoMinified + gzip package size for babel-plugin-react-element-to-jsx-string in KB

Readme


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

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

Table of Contents



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"]
}

  1. 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.

  1. 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