react-element-to-jsx-string
Advanced tools
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.
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>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 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.
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.
Turn a ReactElement into the corresponding JSX string.
Useful for unit testing and any other need you may think of.
Features:
<div a={{b: {c: {d: <div />}}}} />prop={function noRefCheck() {}}), object, ReactElement (inlined), regex, booleans (with or without shorthand syntax), ...o={{a: 1, b:2}} === o={{b:2, a:1}})ref and key attributes, they are always on top of propsTable of Contents generated with DocToc
yarn add react-element-to-jsx-string [--dev]
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>
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.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.
options.useFragmentShortSyntax: boolean, default true
If true, fragment will be represented with the JSX short syntax <>...</> (when possible).
If false, fragment will always be represented with the JSX explicit syntax <React.Fragment>...</React.Fragment>.
According to the specs:
<React.Fragment key={...}>...</React.Fragment><React.Fragment />Note: to use fragment you must use React >= 16.2
The environment you use to use react-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.
yarn test
yarn test:watch
yarn build
yarn build:watch
Decide if this is a patch, minor or major release, look at http://semver.org/
npm run release [major|minor|patch|x.x.x]
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.
FAQs
Turn a ReactElement into the corresponding JSX string.
The npm package react-element-to-jsx-string receives a total of 2,654,037 weekly downloads. As such, react-element-to-jsx-string popularity was classified as popular.
We found that react-element-to-jsx-string demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket and Seal Security collaborate to fix a critical npm overrides bug, resolving a three-year security issue in the JavaScript ecosystem's most popular package manager.
Security News
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.