{"id":13652903,"url":"https://github.com/txgruppi/json2react","last_synced_at":"2025-04-09T13:11:10.083Z","repository":{"id":6354374,"uuid":"55326903","full_name":"txgruppi/json2react","owner":"txgruppi","description":"Use JSON to create React Components.","archived":false,"fork":false,"pushed_at":"2022-12-30T18:40:29.000Z","size":145,"stargazers_count":170,"open_issues_count":2,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-06T05:37:06.717Z","etag":null,"topics":["json","react","schema","ui"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/txgruppi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-03T02:59:33.000Z","updated_at":"2024-10-23T21:32:21.000Z","dependencies_parsed_at":"2023-01-13T13:58:43.922Z","dependency_job_id":null,"html_url":"https://github.com/txgruppi/json2react","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/txgruppi%2Fjson2react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/txgruppi%2Fjson2react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/txgruppi%2Fjson2react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/txgruppi%2Fjson2react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/txgruppi","download_url":"https://codeload.github.com/txgruppi/json2react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248045245,"owners_count":21038554,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["json","react","schema","ui"],"created_at":"2024-08-02T02:01:03.842Z","updated_at":"2025-04-09T13:11:10.055Z","avatar_url":"https://github.com/txgruppi.png","language":"JavaScript","funding_links":[],"categories":["Libraries"],"sub_categories":[],"readme":"[![GitHub license](https://img.shields.io/github/license/txgruppi/json2react.svg?style=flat-square)](https://github.com/txgruppi/json2react)\n[![David](https://img.shields.io/david/txgruppi/json2react.svg?style=flat-square)](https://github.com/txgruppi/json2react)\n[![npm](https://img.shields.io/npm/v/json2react.svg?style=flat-square)](https://www.npmjs.com/package/json2react)\n[![Travis](https://img.shields.io/travis/txgruppi/json2react.svg?style=flat-square)](https://travis-ci.org/txgruppi/json2react)\n[![Codecov](https://img.shields.io/codecov/c/github/txgruppi/json2react.svg?style=flat-square)](https://codecov.io/github/txgruppi/json2react)\n\n# json2react\n\nUse JSON to create React Stateless Components.\n\n`json2react` allows you to create React Stateless Components from JSON using a simple schema.\n\n## Why?\n\nI needed a way to store static views on the database as data, not as HTML code.\n\nUsing this library you can fetch some remote data which represents an UI and render it with React.\n\n## Install\n\nLike any other NPM package\n\n```sh\nnpm install --save json2react\n```\n\n## Usage\n\nYou can use it with:\n\n- `React.render`\n- As the return value, or part of it, of a stateless component\n- As the return value, or part of it, of a component's `render` method\n\n```javascript\nimport { createElement } from \"react\";\nimport j2r from \"json2react\";\n\nconst jsonUI = {\n  type: \"div\",\n  props: {\n    style: { textAlign: \"center\" },\n  },\n  children: [\n    { type: \"h1\", children: \"It works!\" },\n    {\n      type: \"p\",\n      children: {\n        type: \"small\",\n        children: \"This component was created from JSON\",\n      },\n    },\n  ],\n};\n\nReactDOM.render(j2r(createElement, jsonUI), document.body);\n```\n\nYou can pass a mapper function as second argument to map types to components.\n\n```javascript\nimport { createElement } from \"react\";\nimport j2r from \"json2react\";\nimport MyDivComponent from \"./MyDivComponent\";\n\nconst jsonUI = {\n  type: \"MyDivComponent\",\n  props: {\n    style: { textAlign: \"center\" },\n  },\n  children: [\n    { type: \"h1\", children: \"It works!\" },\n    {\n      type: \"p\",\n      children: {\n        type: \"small\",\n        children: \"This component was created from JSON\",\n      },\n    },\n  ],\n};\n\nconst mapTypeToComponent = (type, props) =\u003e {\n  switch (type) {\n    case \"MyDivComponent\": return MyDivComponent;\n  }\n  return type;\n};\n\nReactDOM.render(j2r(createElement, mapTypeToComponent, jsonUI), document.body);\n```\n\n## Schema\n\nPlease check the file http://github.com/txgruppi/json2react/blob/v0.0.0/schema.json for the detailed schema description.\n\n## Tests\n\nOnly tests\n\n```sh\nnpm test\n```\n\nTests and coverage\n\n```sh\nnpm run coverage\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftxgruppi%2Fjson2react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftxgruppi%2Fjson2react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftxgruppi%2Fjson2react/lists"}