txgruppi / Json2react
Licence: bsd-3-clause
Use JSON to create React Components.
Stars: ✭ 158
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Json2react
Object Editor React
Schema-aware editor for structured JSON objects (drop-in React component)
Stars: ✭ 104 (-34.18%)
Mutual labels: json, schema
Govalid
Data validation library for golang. [MIGRATING TO NEW ADDRESS]
Stars: ✭ 59 (-62.66%)
Mutual labels: json, schema
Flatcc
FlatBuffers Compiler and Library in C for C
Stars: ✭ 434 (+174.68%)
Mutual labels: json, schema
Elementui
Generate a form using JSON Schema, Vue and ElementUI
Stars: ✭ 130 (-17.72%)
Mutual labels: json, schema
Plank
A tool for generating immutable model objects
Stars: ✭ 449 (+184.18%)
Mutual labels: json, schema
Schema
📐 Validating data structures against a given Schema.
Stars: ✭ 359 (+127.22%)
Mutual labels: json, schema
Scobot
SCORM API for Content. JavaScript library, QUnit tests and examples.
Stars: ✭ 128 (-18.99%)
Mutual labels: json, schema
Typedload
Python library to load dynamically typed data into statically typed data structures
Stars: ✭ 120 (-24.05%)
Mutual labels: json, schema
Specs
Technical specifications and guidelines for implementing Frictionless Data.
Stars: ✭ 403 (+155.06%)
Mutual labels: json, schema
Node Convict
Featureful configuration management library for Node.js
Stars: ✭ 1,855 (+1074.05%)
Mutual labels: json, schema
Vue Json Ui Editor
Edit JSON in UI form with JSON Schema and Vue.js
Stars: ✭ 392 (+148.1%)
Mutual labels: json, schema
Sleekdb
Pure PHP NoSQL database with no dependency. Flat file, JSON based document database.
Stars: ✭ 450 (+184.81%)
Mutual labels: json, schema
Native
Generate a form using JSON Schema and Vue.js
Stars: ✭ 382 (+141.77%)
Mutual labels: json, schema
Mongoose Patch History
Mongoose plugin that saves a history of JSON patch operations for all documents belonging to a schema in an associated 'patches' collection
Stars: ✭ 82 (-48.1%)
Mutual labels: json, schema
Oscal
Open Security Controls Assessment Language (OSCAL)
Stars: ✭ 272 (+72.15%)
Mutual labels: json, schema
Mimesis
Mimesis is a high-performance fake data generator for Python, which provides data for a variety of purposes in a variety of languages.
Stars: ✭ 3,439 (+2076.58%)
Mutual labels: json, schema
Schema Registry
Confluent Schema Registry for Kafka
Stars: ✭ 1,647 (+942.41%)
Mutual labels: json, schema
Framework
Strongly-typed JavaScript object with support for validation and error handling.
Stars: ✭ 136 (-13.92%)
Mutual labels: json, schema
json2react
Use JSON to create React Stateless Components.
json2react
allows you to create React Stateless Components from JSON using a simple schema.
Why?
I needed a way to store static views on the database as data, not as HTML code.
Using this library you can fetch some remote data which represents an UI and render it with React.
Install
Like any other NPM package
npm install --save json2react
Usage
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 "json2react";
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);
You can pass a mapper function as second argument to map types to components.
import { createElement } from "react";
import j2r from "json2react";
import MyDivComponent from "./MyDivComponent";
const jsonUI = {
type: "MyDivComponent",
props: {
style: { textAlign: "center" },
},
children: [
{ type: "h1", children: "It works!" },
{
type: "p",
children: {
type: "small",
children: "This component was created from JSON",
},
},
],
};
const mapTypeToComponent = (type, props) => {
switch (type) {
case "MyDivComponent": return MyDivComponent;
}
return type;
};
ReactDOM.render(j2r(createElement, mapTypeToComponent, jsonUI), document.body);
Schema
Please check the file http://github.com/txgruppi/json2react/blob/v0.0.0/schema.json for the detailed schema description.
Tests
Only tests
npm test
Tests and coverage
npm run coverage
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].