-
-
Save praveensastry/132eacff4a684a48e73cae21f2451078 to your computer and use it in GitHub Desktop.
JS module to render views from static data
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//You can use it with: | |
//React.render | |
//As the return value, or part of it, of a stateless component | |
//As the return value, or part of it, of a component's render method | |
import { createElement } from "react"; | |
import j2r from "renderViewFromJson"; | |
const jsonUI = { | |
type: "div", | |
props: { | |
style: { textAlign: "center" }, | |
}, | |
children: [ | |
{ type: "h1", children: "It works!" }, | |
{ | |
type: "p", | |
children: { | |
type: "small", | |
children: "This component was created from JSON", | |
}, | |
}, | |
], | |
}; | |
ReactDOM.render(j2r(createElement, jsonUI), document.body); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"use strict"; | |
function renderViewFromJson(create, mapper, schema) { | |
if (typeof schema === "undefined") { | |
schema = mapper; | |
mapper = null; | |
} | |
if (schema === null) { | |
return null; | |
} | |
if (typeof schema === "string") { | |
return schema; | |
} | |
if (!isPlainObject(schema)) { | |
throw new Error("schema must be a string or a plain object"); | |
} | |
var hasNonEmptySchemaType = ( | |
schema.type && | |
typeof schema.type === "string" && | |
schema.type.trim() !== "" | |
); | |
if (! hasNonEmptySchemaType) { | |
throw new Error("schema.type must be a non-empty string"); | |
} | |
schema.type = schema.type.trim(); | |
if (schema.props !== undefined && !isPlainObject(schema.props)) { | |
throw new Error("schema.props must be a plain object"); | |
} | |
var type = schema.type; | |
var props = schema.props || null; | |
var children = schema.children && [].concat(schema.children).map(json2react.bind(null, create, mapper)); | |
mapper && (type = mapper(type, props)); | |
return create.apply(create, [].concat([type, props]).concat(children)); | |
} | |
function isPlainObject(maybe) { | |
return ( | |
maybe !== null && | |
typeof maybe === "object" && | |
Object.prototype.toString.call(maybe) == "[object Object]" | |
); | |
} | |
module.exports = renderViewFromJson; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"$schema": "http://json-schema.org/schema#", | |
"title": "Render View Element", | |
"definitions": { | |
"render_react_element": { | |
"type": "object", | |
"properties": { | |
"type": { | |
"type": "string", | |
"description": "The `nodeName` of the element you want to create. e.g.: div; span; strong. Can be any value accepted as first argument of `React.createElement`." | |
}, | |
"props": { | |
"type": "object", | |
"additionalProperties": true, | |
"description": "The properties of the element you want to create. e.g.: { 'className': 'col-xs-12' }. Can be any value accepted as second argument of `React.createElement`" | |
}, | |
"children": { | |
"oneOf": [ | |
{ "type": "string" }, | |
{ "$ref": "#/definitions/json_react_element" }, | |
{ "type": "array", "items": { "$ref": "#/definitions/json_react_element" } } | |
], | |
"description": "The children of the element you want to create. If it is a string it will be used as `textContent`; if it is an array it will be mapped using the `json2react` function; if it is an object it will be used as an object described by this schema." | |
} | |
}, | |
"required": [ "type" ], | |
"additionalProperties": false | |
} | |
}, | |
"type": "object", | |
"$ref": "#/definitions/render_react_element" | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment