jsx2json

jsx2json parses JSX into usable JSON.

install

npm install jsx2json

features

• No dependacies
• Props without values are defaulted to true
• Handles custom tag types
• Passing in multiple root tags will result in an array.
• Handles object-based tag types, eg. <Nav.Item>
• Can parse object or functional props with the useEval option

use

const jsx2json = require('jsx2json');
const result = jsx2json(`<button disabled>Hello</button>`)

//Result
{
	type : 'button',
	props : {
		disabled : true
	},
	children : ['Hello']
}

using eval

if you would like to parse javascript-based parameters, you can use the useEval option. Note: Not only is using eval dangerous if you aren't controlling the input, but the result of jsx2json may not be pure JSON.

jsx2json(`<button onClick={()=>alert('hey!')} style={{top : '4px', color : 'white'}} />`);

//Result
{
	type : 'button',
	props : {
		onClick : ()=>{
			alert('hey!')
		},
		style : {
			top : '4px',
			color : 'white'
		}
	},
	children : []
}

complex use case

const result = jsx2json(`
	<Nav.Item className='test'>
		Hello <a href='/test'>you</a>
	</Nav.Item>
	<button disabled onClick={()=>alert('pressed!')}>Press me</button>
`, {useEval : true});

Result

[
	{
		type: 'Nav.Item',
		props : {
			className : 'test'
		},
		children : [
			'Hello',
			{
				type : 'a',
				props : {
					href : '/test'
				},
				children : ['you']
			}
		]
	},
	{
		type : 'button',
		props : {
			disabled : true,
			onClick : ()=>{alert('pressed!')}
		},
		children : [ 'Press me' ]
	}
]