react-element-to-jsx-string
!Versionversion-svgpackage-url !Build Statustravis-svgtravis-url !Licenselicense-imagelicense-url !Downloadsdownloads-imagedownloads-url
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
refandkeyattributes, they are always on top of props
- React's documentation indent style for JSX
Setup
```sh yarn add react-element-to-jsx-string --dev ```Usage
```js import React from 'react'; import reactElementToJSXString from 'react-element-to-jsx-string'; console.log(reactElementToJSXString(Hello, world!
));
//
// Hello, world!
//
```
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 withfunction noRefCheck() {}.
options.functionValue: function, default (fn) => fn
Allows you to override the default formatting of function values.
functionValue receives the original function reference as input
and should send any value as output.
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}
options.maxInlineAttributesLineLength: number, default undefined
Allows to render multiple attributes on the same line and control the behaviour.
You can provide the max number of characters to render inline with the tag name. If the number of characters on the line (including spacing and the tag name)
exceeds this number, then all attributes will be rendered on a separate line. The default value of this option is undefined. If this option is undefined
then if there is more than one attribute on an element, they will render on their own line. Note: Objects passed as attribute values are always rendered
on multiple lines
options.sortProps: boolean, default true
Either to sort or not props. If you use this lib to make some isomorphic rendering you should set it to false, otherwise this would lead to react invalid checksums as the prop order is part of react isomorphic checksum algorithm.
Environment requirements
The environment you use to usereact-element-to-jsx-string should have ES2015 support.
Use the Babel polyfill or any other method that will make you
environment behave like an ES2015 environment.
Test
```sh yarn test yarn test:watch ```Build
```sh yarn build yarn build:watch ```Release
Decide if this is apatch, minor or major release, look at http://semver.org/
```sh
npm run release major|minor|patch|x.x.x
```
