{"id":13400745,"url":"https://github.com/TechniqueSoftware/react-json-schema","last_synced_at":"2025-03-14T06:31:54.494Z","repository":{"id":1993517,"uuid":"43512506","full_name":"TechniqueSoftware/react-json-schema","owner":"TechniqueSoftware","description":"Configure and build views using JSON schemas mapped to React components","archived":false,"fork":false,"pushed_at":"2022-11-16T06:30:29.000Z","size":996,"stargazers_count":174,"open_issues_count":10,"forks_count":24,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-10-30T20:49:06.128Z","etag":null,"topics":["javascript-library","json-schema","parser","react","react-components","react-elements"],"latest_commit_sha":null,"homepage":"http://techniquesoftware.github.io/react-json-schema/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TechniqueSoftware.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":"2015-10-01T18:11:24.000Z","updated_at":"2024-06-13T12:13:59.000Z","dependencies_parsed_at":"2023-01-13T11:33:44.906Z","dependency_job_id":null,"html_url":"https://github.com/TechniqueSoftware/react-json-schema","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TechniqueSoftware%2Freact-json-schema","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TechniqueSoftware%2Freact-json-schema/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TechniqueSoftware%2Freact-json-schema/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TechniqueSoftware%2Freact-json-schema/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TechniqueSoftware","download_url":"https://codeload.github.com/TechniqueSoftware/react-json-schema/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243537906,"owners_count":20307098,"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":["javascript-library","json-schema","parser","react","react-components","react-elements"],"created_at":"2024-07-30T19:00:55.089Z","updated_at":"2025-03-14T06:31:54.488Z","avatar_url":"https://github.com/TechniqueSoftware.png","language":"JavaScript","readme":"# react-json-schema\n\n`npm install react-json-schema`\n\nConstruct React elements from JSON by mapping JSON definitions to React components. Use react-json-schema for data-driven layouts, or as an abstraction layer for React components and props.\n\nRender anywhere (as long as it's DOM)! Since react-json-schema does not perform any rendering, the method in which you want to render is up to you. For example, you can use ReactDOMServer.render, ReactDOM.renderToString, etc. if you'd like. This also means JSX is not a dependency for react-json-schema.\n\n[Quick Documentation and Examples](http://techniquesoftware.github.io/react-json-schema/)\n\n### Full Documentation\n\n* [Schema](#schema)\n* [Dynamic Children and Keys](#dynamic-children-and-keys)\n* [Component Mapping](#component-mapping)\n* [Complete Example](#complete-example)\n\n#### Schema\n\nThe primary resource needed is a defined schema in JSON or a JavaScript object literal. It's recommended that schema attributes mainly define React component props. The parser explicitly handles the following attributes:\n- **component**: _MUST_ exist and be defined by a string or React component (must be a string if describing a native HTML tag)\n- **children**: _MAY_ exist to define sub-components\n- **text**: _MAY_ exist to as a string to define inner HTML text (overrides children)\n- **key**: _MAY_ exist to define a key for dynamic children\n\nExample JSON schema\n```js\nconst schema = {\n  \"component\": \"CommentList\",\n  \"children\": [\n    {\n      \"component\": \"Comment\",\n      \"author\": \"Pete Hunt\",\n      \"children\": \"This is one comment\"\n    },\n    {\n      \"component\": \"Comment\",\n      \"author\": \"Jordan Walke\",\n      \"children\": \"This is *another* comment\"\n    },\n    {\n      \"component\": \"a\",\n      \"href\": \"#help\",\n      \"text\": \"I need help\"\n    }\n  ]\n};\n```\n\nExample JS literal\n```js\n...\n  {\n    \"component\": Comment,\n    \"author\": \"Pete Hunt\",\n    \"children\": \"This is one comment\"\n  },\n...\n```\n\n##### Dynamic Children and Keys\n\nWhen arrays of components exist (like children), react-json-schema will resolve a key for the element, which follows the rules for [dynamic children](https://facebook.github.io/react/docs/multiple-components.html#dynamic-children). It will either use a custom key if defined, or resolve a numeric key based on the array index.\n\nExample of defining child keys\n```js\n...\n  {\n    \"component\": \"Comment\",\n    \"key\": \"0ab19f8e\", // defined key\n    \"author\": \"Pete Hunt\",\n    \"children\": \"This is one comment\"\n  },\n...\n```\n\n#### Component Mapping\n\nReact components need to be exposed to the react-json-schema so that the parser can create React elements. If the schema contains object literals with component references, the schema is exposing the React components and no additional configuration is needed. If the schema does not contain references to components, the components can be exposed via `setComponentMap`.\n\nExample for exposing non-exposed components (ES6)\n```js\n/* es6 object literal shorthand: { ContactForm } == { ContactForm: ContactForm } */\ncontactForm.setComponentMap({ ContactForm, StringField });\n```\n\n#### Parsing\n\nUse `parseSchema` to render React elements. It returns the root node. Note that if your schema's root is an array, you'll have to wrap the schema in an element.\n\nExample (ES6)\n```js\nReactDOM.render(contactForm.parseSchema(schema),\n  document.getElementById('contact-form'));\n```\n\n#### Complete Example\n\n```js\nimport ReactDOM from 'react-dom';\nimport ReactJsonSchema from 'react-json-schema';\n\nimport FormStore from 'FormStore';\nimport CommentList from 'CommentList';\nimport Comment from 'Comment';\n\n// For this example, let's pretend I already have data and am ignorant of actions\nconst schema = FormStore.getFormSchema();\nconst view = new ReactJsonSchema();\n\nview.setComponentMap({ CommentList, Comment });\n\nReactDOM.render(view.parseSchema(schema),\n  document.getElementById('content'));\n```\n\n### Demo an Example Codebase\n\nTo run the demo\n* `cd demo \u0026\u0026 npm install`\n* `npm start`\n* The app will be served at http://localhost:8080\n\n### Contribution and Code of Conduct\n\nIf you'd like to ask a question, raise a concern, or contribute, please follow our [contribution guidelines](CONTRIBUTE.md).\n\n### Alternatives\n\n* [react-jsonschema-form](https://github.com/mozilla-services/react-jsonschema-form): A React component for building Web forms from JSON Schema. This library further abstracts React components, making it easier to build forms. Also, it comes with components. React-json-schema is a lighter alternative that allows the use of any components.\n\n### Roadmap\n\n* Playground on our public site for discoverability\n* Possibility of react-native-json-schema\n","funding_links":[],"categories":["Uncategorized","React [🔝](#readme)"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTechniqueSoftware%2Freact-json-schema","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTechniqueSoftware%2Freact-json-schema","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTechniqueSoftware%2Freact-json-schema/lists"}