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

<img src="https://img.shields.io/npm/v/babel-plugin-react-element-to-jsx-string.svg?maxAge=86400" alt="Last npm Registry Version">

<img src="https://travis-ci.org/ramasilveyra/babel-plugin-react-element-to-jsx-string.svg?branch=master" alt="Build Status">

<img src="https://img.shields.io/codecov/c/github/ramasilveyra/babel-plugin-react-element-to-jsx-string.svg?branch=master" alt="Code coverage">

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

Table of Contents

• Example
• Install
• Usage
• Contribute
• License

Example

import React from 'react';

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

export default Article;

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

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

$ 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

License