Package Exports

react-element-to-jsx-string

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-element-to-jsx-string) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-element-to-jsx-string

Turn a ReactElement into the corresponding JSX string.

Useful for unit testing and any other need you may think of.

Features:

supports nesting and deep nesting like <div a={{b: {c: {d: <div />}}}} />
props: supports string, number, function (inlined as prop={function noRefCheck() {}}), object, ReactElement (inlined), regex..
order props alphabetically
sort object keys in a deterministic order (o={{a: 1, b:2}} === o={{b:2, a:1}})
React's documentation indent style for JSX

Setup

npm install react-element-to-jsx-string --save[-dev]

Usage

import React from 'react';
import reactElementToJSXString from 'react-element-to-jsx-string';

console.log(reactElementToJSXString(<div a="1" b="2">Hello, world!</div>));
// <div
//   a="1"
//   b="2"
// >
//   Hello, world!
// </div>

Test

npm test
npm run test:watch

Build

npm run build
npm run build:watch

Thanks

alexlande/react-to-jsx was a good source of inspiration.

We built our own module because we had some needs like ordering props in alphabetical order.