Configure and build views using JSON schemas mapped to React components.
Render from Data
JSON is a commonly used data-interchage format, and has parsing libraries available for most languages. react-json-schema makes it easy to pass and manipulate React views across any technology stack.
{
"component": "form",
"className": "m2",
"children": [{
"component": "label",
"children": [{
"component": "div",
"text": "First Name"
}, {
"component": "input",
"type": "text",
"name": "firstName",
"className": "mb2"
}]
}, {
"component": "label",
"children": [{
"component": "div",
"text": "Last Name"
}, {
"component": "input",
"type": "text",
"name": "lastName"
}]
}]
}
Rendering...
Abstract Components
This example uses components provided from react-id-swiper. react-json-schema enables you to quickly dive into exploring any component library, including your own.
{
"component": "Swiper",
"shouldSwiperUpdate": true,
"pagination": {
"el": ".swiper-pagination",
"clickable": true
},
"children": [{
"component": "div",
"style": { "color": "#80d12a" },
"children": [{
"component": "h3",
"text": "One dependency (ReactDOM)"
}]
},{
"component": "div",
"style": { "color": "#9352eb" },
"children": [{
"component": "h3",
"text": "5KB Minified"
}]
}]
}
Rendering...
Typical Implementation
Grab dependencies and components
import ReactDOM from 'react-dom';
import ReactJsonSchema from 'react-json-schema';
import CommentList from 'CommentList';
import Comment from 'Comment';
...Define a JSON schema
const schema = {
"component": "CommentList",
"children": [
{
"component": "Comment",
"author": "Pete Hunt",
"children": "This is one comment"
},
{
"component": "Comment",
"author": "Jordan Walke",
"children": "This is *another* comment"
},
{
"component": "a",
"href": "#help",
"text": "I need help"
},
]
};
...Map components to schema and render
const view = new ReactJsonSchema();
view.setComponentMap({ CommentList, Comment });
ReactDOM.render(view.parseSchema(schema),
document.getElementById('content'));