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, 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

• react-element-to-jsx-string
  • Setup
  • Usage
  • Test
  • Build
  • Thanks

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>

API

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.tabStop: number, default 2

Provide a different number of columns for indentation.

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}

Test

npm test
npm run test:watch

Build

npm run build
npm run build:watch

Release

Decide if this is a patch, minor or major release, look at http://semver.org/

npm install mversion json -g
mversion PatchOrMinorOrMajor && \
git commit -am `json -f package.json version` && \
git tag v`json -f package.json version` && \
git push && \
git push --tags && \
npm publish

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.