feat(sortProps): add option to remove sorting of props

Author: shouze

README.md

@@ -112,6 +112,10 @@ console.log(reactElementToJSXString(<div a="1" b="2">Hello, world!</div>));
   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 use `react-element-to-jsx-string` should have [ES2015](https://babeljs.io/learn-es2015/) support.

index-test.js

@@ -203,6 +203,19 @@ describe('reactElementToJSXString(ReactElement)', () => {
     );
   });
 
+  it('reactElementToJSXString(<div z="3" a="1" b="2"/>, {sortProps: false})', () => {
+    /* eslint react/jsx-sort-props: 0 */
+    expect(
+      reactElementToJSXString(<div z="3" a="1" b="2" />, { sortProps: false })
+    ).toEqual(
+      `<div
+  z="3"
+  a="1"
+  b="2"
+/>`
+    );
+  });
+
   it('reactElementToJSXString(<div a="1">Hello</div>)', () => {
     expect(reactElementToJSXString(<div a="1">Hello</div>)).toEqual(
       `<div a="1">

index.js

@@ -20,6 +20,7 @@ export default function reactElementToJSXString(
     tabStop = 2,
     useBooleanShorthandSyntax = true,
     maxInlineAttributesLineLength,
+    sortProps = true,
   } = {}
 ) {
   const getDisplayName = displayName || getDefaultDisplayName;
@@ -47,6 +48,7 @@ got \`${typeof Element}\``
       Element.props,
       getDefaultProps(Element),
       inline,
+      sortProps,
       lvl
     );
     let attributes = [];
@@ -170,7 +172,7 @@ got \`${typeof Element}\``
     }
   }
 
-  function formatProps(props, defaultProps, inline, lvl) {
+  function formatProps(props, defaultProps, inline, sortProps, lvl) {
     let formatted = Object.keys(props).filter(noChildren);
 
     if (useBooleanShorthandSyntax) {
@@ -188,9 +190,13 @@ got \`${typeof Element}\``
       );
     }
 
-    return formatted
-      .sort()
-      .map(propName => getJSXAttribute(propName, props[propName], inline, lvl));
+    if (sortProps) {
+      formatted = formatted.sort();
+    }
+
+    return formatted.map(propName =>
+      getJSXAttribute(propName, props[propName], inline, lvl)
+    );
   }
 
   function getJSXAttribute(name, value, inline, lvl) {