@kohlmannj/jsx-to-string

Parse your React JSX components to string

Differences from the Original Package

This is a fork of grommet/jsx-to-string / jsx-to-string on npm. Here are the differences:

• Add indents to multi-line strings (grommet/jsx-to-string#38)
• Incorporate @hahnbi's change to use double quotes for string values (grommet/jsx-to-string#36)

Install

npm install @kohlmannj/jsx-to-string

Usage

import React from 'react';
import jsxToString from '@kohlmannj/jsx-to-string';
// or var jsxToString = require('@kohlmannj/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:

import React from 'react';
import jsxToString from '@kohlmannj/jsx-to-string';
//or var jsxToString = require('@kohlmannj/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:

import React from 'react';
import jsxToString from '@kohlmannj/jsx-to-string';
//or var jsxToString = require('@kohlmannj/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:

import React from 'react';
import jsxToString from '@kohlmannj/jsx-to-string';
//or var jsxToString = require('@kohlmannj/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:

import React from 'react';
import jsxToString from '@kohlmannj/jsx-to-string';
//or var jsxToString = require('@kohlmannj/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:

import React from 'react';
import jsxToString from '@kohlmannj/jsx-to-string';
//or var jsxToString = require('@kohlmannj/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.

import React from 'react';
import jsxToString from '@kohlmannj/jsx-to-string';
//or var jsxToString = require('@kohlmannj/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:

import React from 'react';
import jsxToString from '@kohlmannj/jsx-to-string';
//or var jsxToString = require('@kohlmannj/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