react-element-to-jsx-string

What is react-element-to-jsx-string?

The react-element-to-jsx-string npm package is a utility that converts React elements into their JSX string representation. This can be useful for debugging, testing, or rendering purposes where you need to see the JSX code of a React element.

What are react-element-to-jsx-string's main functionalities?

Convert React Element to JSX String

This feature allows you to convert a React element into its JSX string representation. The code sample demonstrates how to convert a simple React element into a JSX string.

const React = require('react');
const reactElementToJSXString = require('react-element-to-jsx-string');

const element = <div className="test">Hello, World!</div>;
const jsxString = reactElementToJSXString(element);
console.log(jsxString); // <div className="test">Hello, World!</div>

Customizing Output

This feature allows you to customize the output of the JSX string. The code sample shows how to use the `displayName` option to customize the display name of the React element.

const React = require('react');
const reactElementToJSXString = require('react-element-to-jsx-string');

const element = <div className="test">Hello, World!</div>;
const jsxString = reactElementToJSXString(element, {
  displayName: element => element.type.displayName || element.type.name || element.type
});
console.log(jsxString); // <div className="test">Hello, World!</div>

Handling Complex Elements

This feature demonstrates how the package can handle more complex React elements with nested components. The code sample converts a React element with nested elements into a JSX string.

const React = require('react');
const reactElementToJSXString = require('react-element-to-jsx-string');

const element = (
  <div>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
  </div>
);
const jsxString = reactElementToJSXString(element);
console.log(jsxString); // <div>
                        //   <h1>Hello, World!</h1>
                        //   <p>This is a paragraph.</p>
                        // </div>

Other packages similar to react-element-to-jsx-string

react-test-renderer

The react-test-renderer package is primarily used for testing React components. It allows you to render React components to pure JavaScript objects without depending on the DOM or a browser. While it doesn't convert elements to JSX strings, it provides a way to inspect the rendered output of React components, which can be useful for testing purposes.

enzyme

Enzyme is a testing utility for React that makes it easier to assert, manipulate, and traverse your React components' output. It provides a way to render components and inspect their output, but it doesn't convert elements to JSX strings. Enzyme is more focused on testing and interacting with React components.

react-element-to-string

The react-element-to-string package is similar to react-element-to-jsx-string in that it converts React elements to string representations. However, it focuses on converting elements to plain strings rather than JSX strings. This can be useful for logging or debugging purposes.

README

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

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.

Changelog

2.2.0 (2016-01-14)

<a name="2.1.5"></a>