react-element-to-jsx-string 0 travis-ci npm

Turn a ReactElement into the corresponding JSX string


Version Build Status License Downloads

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, booleans (with or without shorthand syntax), … - order props alphabetically - sort object keys in a deterministic order (o={{a: 1, b:2}} === o={{b:2, a:1}}) - handle ref and key attributes, they are always on top of props - React’s documentation indent style for JSX

Table of Contents generated with DocToc


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


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>


reactElementToJSXString(ReactElement[, options])

options.displayName: function(ReactElement)

Provide a different algorithm in charge of finding the right display name (name of the underlying Class) for your element.

Just return the name you want for the provided ReactElement, as a string.

options.filterProps: array, default []

Provide an array of props to filter for every component. For example [‘key’] will suppress the key=“” prop from being added.

options.showDefaultProps: boolean, default true

If true, default props shown.

If false, default props are omitted unless they differ from from the default value.

options.showFunctions: boolean, default false

If true, functions bodies are shown.

If false, functions bodies are replaced with function noRefCheck() {}.

options.useBooleanShorthandSyntax: boolean, default true

If true, Boolean prop values will be omitted for shorthand syntax.

If false, Boolean prop values will be explicitly output like prop={true} and prop={false}


npm test
npm run test:watch


npm run build
npm run build:watch


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.

Related Repositories



Turn a ReactElement into the corresponding JSX string ...



JSX assertions for Chai using Algolia's react-element-to-jsx-string ...

Top Contributors

vvo slightlytyler HHogg Morhaus redox greenkeeperio-bot TiuSh p0wl leoasis beauroberts ericf Sinewyk


package version
collapse-white-space 1.0.3
is-plain-object 2.0.4
lodash 4.17.4
sortobject 1.1.1
stringify-object 3.2.0
dev babel-cli 6.24.1
babel-eslint 7.2.3
babel-jest 20.0.3
babel-plugin-lodash 3.2.11
babel-preset-es2015 6.24.1
babel-preset-flow 6.23.0
babel-preset-react 6.24.1
babel-preset-stage-2 6.24.1
babel-register 6.24.1
conventional-changelog-cli 1.3.2
doctoc 1.3.0
eslint 4.4.1
eslint-config-algolia 12.0.0
eslint-config-prettier 2.3.0
eslint-plugin-import 2.7.0
eslint-plugin-jest 20.0.3
eslint-plugin-prettier 2.1.2
eslint-plugin-react 7.2.0
expect 1.20.2
flow-bin 0.52.0
flow-copy-source 1.2.0
husky 0.14.3
jest 20.0.4
json 9.0.6
lint-staged 4.0.3
mversion 1.10.1
prettier 1.5.3
react 15.6.1
react-dom 15.6.1
react-test-renderer 15.6.1
peer react ^0.14.8 || ^15.0.1 || ^16.0.0 || ^16.0.0-rc || ^16


-   v4.2.0 zip tar
-   v4.1.0 zip tar
-   v4.0.0 zip tar
-   v3.2.0 zip tar
-   v3.1.2 zip tar
-   v3.1.1 zip tar
-   v3.1.0 zip tar
-   v3.0.0 zip tar
-   v2.6.1 zip tar
-   v2.6.0 zip tar
-   v2.2.0 zip tar
-   v2.1.5 zip tar
-   v2.1.4 zip tar
-   v2.1.3 zip tar
-   v2.1.0 zip tar
-   v2.0.5 zip tar
-   v2.0.4 zip tar
-   v2.0.3 zip tar
-   v2.0.2 zip tar
-   v2.0.1 zip tar
-   v2.0.0 zip tar
-   v1.1.2 zip tar
-   v1.1.1 zip tar
-   v1.1.0 zip tar
-   2.5.0 zip tar
-   2.4.0 zip tar
-   2.3.0 zip tar