Skip to content

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

Repository files navigation

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.

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published