alexlande / react-to-jsx Goto Github PK

Been diggin in trying to figure out a way to sort of eliminate all the line breaks for simple one-line tags:

Given the following:

<Button level="info" type="foo">Info</Button>

I'm trying to make it print like this:

<Button level="info" type="foo">Info</Button>

But instead it prints like this:

<Button
  level="info"
  type="raised">
  Info
</Button>

It's not as pronounced when there's only one attribute, but it's still multi-line:

<Button level="info">
  Info
</Button>

I'm probably just being nitpicky here, but ultimately I'm trying to just have it printed the same it was it was originally written. The more I think about it, the more I realize it's probably just not possible.

I know this kind of stuff is extremely tricky - figuring I might just go with typing out the raw strings, but wanted to see if you had any thoughts.

Users should be able to hide props as necessary from the generated output.

When I use react-to-jsx to translate the default input element, it would display the undefined or null props.
ex.

<input className="123" \>

After use react-to-jsx, jsx string would become

<input
    className="123"
    style={null}
    styles={undefined}/>

Could it ignore the null or undefined props?

From alexlande/react-style-guide#3

Crashes if your props are react elements:

Uncaught TypeError: Converting circular structure to JSON

Should output an empty line between siblings for readability.

I have a Dropdown component with a Dropdown.Item subcomponent (e.g. Dropdown.Item = React.createClass()). react-to-jsx will only return Item in the string.

I'm not sure if it's possible to get the parent component from displayName, but it would be helpful for using this to show documentation with live examples.

Great little utility here! One thing I'm having issues with is using it with components created with the ES6 class syntax. It ends up printing something like this:

<function Button(props) { _classCallCheck(this, Button); _get(Object.getPrototypeOf(Button.prototype), "constructor", this).call(this, props); this.state = { hovered: false, active: false }; }> Default </function Button(props) { _classCallCheck(this, Button); _get(Object.getPrototypeOf(Button.prototype), "constructor", this).call(this, props); this.state = { hovered: false, active: false }; }>

I'm still trying to wrap my head around the React internals so I'll be digging into this myself - but was hoping maybe you had an idea of what was happening?

Hey hi your project was inspiring.

Thought I needed ordering props so that I can use this as a testing mechanism. Unfortunately I quickly
discovered that the underlying xmltojs library would also need to be patched.

So even If I do not like to do so, I wrote my own project: https://github.com/algolia/react-element-to-jsx-string

Tet me know what you think, maybe we can merge things, learn from each other.