npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2019 – Ryan Hefner

react-element-to-jsx-string

v14.1.0

Published

Turn a ReactElement into the corresponding JSX string.

Downloads

1,463,108

Readme

react-element-to-jsx-string

Version Build Status License Downloads

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

yarn add react-element-to-jsx-string [--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.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:

  • A keyed fragment will always use the explicit syntax: <React.Fragment key={...}>...</React.Fragment>
  • An empty fragment will always use the explicit syntax: <React.Fragment />

    Note: to use fragment you must use React >= 16.2

Environment requirements

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.

Test

yarn test
yarn test:watch

Build

yarn build
yarn build:watch

Release

Decide if this is a patch, minor or major release, look at http://semver.org/

npm run release [major|minor|patch|x.x.x]

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.