https://github.com/ramasilveyra/babel-plugin-react-element-to-jsx-string

Turn a ReactElement into the corresponding JSX string at build time.
https://github.com/ramasilveyra/babel-plugin-react-element-to-jsx-string

babel babel-plugin jsx react

Last synced: 4 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/ramasilveyra/babel-plugin-react-element-to-jsx-string
• Owner: ramasilveyra
• License: mit
• Created: 2018-08-12T01:32:54.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-10-08T04:32:52.000Z (about 6 years ago)
• Last Synced: 2024-12-09T12:18:36.582Z (28 days ago)
• Topics: babel, babel-plugin, jsx, react
• Language: JavaScript
• Size: 56.6 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        


  

    

  

  

    

  

  

    

  



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


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


Table of Contents


- [Example](#example)

- [Install](#install)

- [Usage](#usage)

- [Contribute](#contribute)

- [License](#license)

Example


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

```js

import React from 'react';

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

const Article = ({ title, content }) => (

  

    
{title}

    
{content}

  

);


export default Article;

```

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

```js

import React from 'react';

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

const Article = ({ title, content }) => (

  

    
{title}

    
{content}

  

);

Article.jsxString = "\n  
{title}
\n  
{content}
\n";


export default Article;

```

Install


**Node.js v8 or newer** is required.

Via the yarn client:

```bash

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

```

Via the npm client:

```bash

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

```

Usage


1. Add to your babel config this plugin:

```json

{

  "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:

```js

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

```

- Via the plugin options:

```json

{

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

}

```

Contribute


Feel free to dive in! [Open an issue](https://github.com/ramasilveyra/babel-plugin-react-element-to-jsx-string/issues/new) or submit PRs.

babel-plugin-react-element-to-jsx-string follows the [Contributor Covenant](https://contributor-covenant.org/version/1/4/) Code of Conduct.

License


[MIT](LICENSE.md)