react-from-object
v1.0.3
Published
Create a React element from a description
Downloads
2
Readme
react-from-object
Create a React element from a description
This tool transforms a "description" of a React element into a React element, for example:
import reactFromObject from 'react-from-object'
const element = reactFromObject(
{
type: 'canvas',
props: {
width: '42px',
height: '42px',
},
children: 'foo',
},
);
// Now element is the same as this:
// <canvas width="42px" height="42px">foo</canvas>
This is useful for passing something to a React app from the server without render to HTML and use dangerouslySetInnerHTML
.
Instead you can pass a description of a React element and build it on the client side.
It's basically replacing this:
<div dangerouslySetInnerHTML={{ __html: markup }} />
with that:
<div>{reactFromObject(data)}</div>
Format
The element can be either a primitive value or an object. The object is expected to have these properties:
type
This is the name of the element to render.
It can be everything that is accepted by React.createElement
.
Example:
{
type: 'div',
}
props
(optional)
If present, it has to be an object containing props of the element.
Example:
{
type: 'img',
props: {
src: 'foo',
alt: 'bar',
},
}
Warning: the children
inside the props
object are not processed - either pass them in children
or process them beforehand.
children
(optional)
This should be either an element or an array of elements.
Example:
{
type: 'div',
children: [
'foo',
{
type: 'p',
children: 'bar',
},
'baz',
],
}
Performance
I don't really have any measurements, but this should be roughly as performant as handwritten JSX.
License
Copyright (c) 2017 Rafał Ruciński. Licensed under the MIT license.