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