# jsx-to-string

> Parse your React JSX component to string

Latest version **1.4.0** (published 2018-05-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install jsx-to-string
pnpm add jsx-to-string
yarn add jsx-to-string
bun add jsx-to-string
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.0 |
| Published | 2018-05-23 |
| First published | 2015-11-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 80.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 123 |
| Maintainers | alansouzati |
| Keywords | react, jsx, parser |

## Links

- npm: https://www.npmjs.com/package/jsx-to-string
- Repository: https://github.com/alansouzati/jsx-to-string
- Homepage: https://github.com/alansouzati/jsx-to-string#readme
- Issues: https://github.com/alansouzati/jsx-to-string/issues
- npm.io page: https://npm.io/package/jsx-to-string

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^0.14.0
- [immutable](https://npm.io/package/immutable.md) ^4.0.0-rc.9
- [json-stringify-pretty-compact](https://npm.io/package/json-stringify-pretty-compact.md) ^1.0.1

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 1.4.0 (latest) — 2018-05-23
- 1.3.1 — 2018-03-22
- 1.3.0 — 2017-11-17
- 1.2.0 — 2017-11-09
- 1.1.0 — 2017-03-14
- 1.0.2 — 2017-02-06
- 1.0.1 — 2017-02-06
- 1.0.0 — 2017-01-04
- 0.3.1 — 2017-01-04
- 0.3.0 — 2016-11-30
- 0.2.16 — 2016-09-07
- 0.2.15 — 2016-08-01
- 0.2.14 — 2016-07-28
- 0.2.13 — 2016-07-15
- 0.2.12 — 2016-07-15
- … 17 more at https://npm.io/package/jsx-to-string/versions

## README

# jsx-to-string

Parse your React JSX components to string

[![Build Status](https://api.travis-ci.org/grommet/jsx-to-string.svg)](https://travis-ci.org/grommet/jsx-to-string)

### Install

```sh
npm install jsx-to-string
```

### Usage

```js
import React from 'react';
import jsxToString from 'jsx-to-string';
// or var jsxToString = require('jsx-to-string');

let Basic = React.createClass({
  render() {
    return (
      <div />
    );
  }
}); //this is your react component

console.log(jsxToString(<Basic test1="test" />)); //outputs: <Basic test1="test" />
```

### Defaults

  1. The default value for function is `...`. Use `keyValueOverride` for custom key values.

### Options
  * useFunctionCode (boolean)

    Optional. Defaults to false. Whether or not to use the function actual source code instead of `...`

    For example:

```js
import React from 'react';
import jsxToString from 'jsx-to-string';
//or var jsxToString = require('jsx-to-string');

let Basic = React.createClass({
  render() {
    return (
      <div />
    );
  }
}); //this is your react component

let _onClickHandler = function () {
  //no-op
}
console.log(jsxToString(<Basic onClick={_onClickHandler} />, {
  useFunctionCode: true
})); //outputs: <Basic onClick={function _onClickHandler() { //no-op }} />
```

* functionNameOnly (boolean)

  Optional. Defaults to false. Whether prop function values should contain only the name.
  This flag will only be used if `useFunctionCode` is set to true.

  For example:

```js
import React from 'react';
import jsxToString from 'jsx-to-string';
//or var jsxToString = require('jsx-to-string');

let Basic = React.createClass({
render() {
  return (
    <div />
  );
}
}); //this is your react component

let _onClickHandler = function () {
//no-op
}
console.log(jsxToString(<Basic onClick={_onClickHandler} />, {
  functionNameOnly: true,
  useFunctionCode: true
})); //outputs: <Basic onClick={_onClickHandler} />
```

  * keyValueOverride (object)

    A key-value map that overrides the value of any React props with exact match with the given key. For example:

```js
import React from 'react';
import jsxToString from 'jsx-to-string';
//or var jsxToString = require('jsx-to-string');

let Basic = React.createClass({
  render() {
    return (
      <div />
    );
  }
}); //this is your react component

let _onClickHandler = function () {
  //no-op
}
console.log(jsxToString(<Basic onClick={_onClickHandler} />, {
  keyValueOverride: {
    onClick: '_onClickHandler'
  }
})); //outputs: <Basic onClick={_onClickHandler} />
```

  * ignoreProps (array)

    An array of string keys that should be ignored from the JSX string. For example:

```js
import React from 'react';
import jsxToString from 'jsx-to-string';
//or var jsxToString = require('jsx-to-string');

let Basic = React.createClass({
  render() {
    return (
      <div />
    );
  }
}); //this is your react component

console.log(jsxToString(<Basic test1="ignore" />, {
  ignoreProps: ['test1']
})); //outputs: <Basic />
```

  * ignoreTags (array)

    An array of string tags that should be ignored from the JSX string. For example:

```js
import React from 'react';
import jsxToString from 'jsx-to-string';
//or var jsxToString = require('jsx-to-string');

let Basic = React.createClass({
  render() {
    return (
      <div />
    );
  }
}); //this is your react component

console.log(jsxToString(<Basic><svg /><img /><p>I am alone</p></Basic>, {
  ignoreTags: ['svg', 'img']
})); //outputs: <Basic><p>I am alone</p></Basic>
```

  * shortBooleanSyntax (boolean)

  Optional. Defaults to false. Whether or not to show the short or long boolean syntax.

```js
import React from 'react';
import jsxToString from 'jsx-to-string';
//or var jsxToString = require('jsx-to-string');

let Basic = React.createClass({
  render() {
    return (
      <div />
    );
  }
}); //this is your react component

console.log(jsxToString(<Basic test test2={false} test3={true}>, {
  shortBooleanSyntax: true,
})); //outputs: <Basic test test2={false} test3 />
```

  * displayName (string)

    A custom value to be used as the component name. For example:

```js
import React from 'react';
import jsxToString from 'jsx-to-string';
//or var jsxToString = require('jsx-to-string');

let Basic = React.createClass({
  render() {
    return (
      <div />
    );
  }
}); //this is your react component

console.log(jsxToString(<Basic test1="ignore" />, {
  displayName: 'CustomName'
})); //outputs: <CustomName />
```

### License

[MIT](https://github.com/alansouzati/jsx-to-string/blob/master/LICENSE)

---
_Source: https://npm.io/package/jsx-to-string · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._