react-json-schema-form

npm install react-json-schema-form

This library constructs React elements from JSON by mapping JSON definitions to React components that you expose.

Full Documentation

• Schema
• Rendering
• Complete Example
• [Try the Demo] https://ineffablep.github.io/react-schema-form/styleguide/index.html

Schema

The 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. *** This will check device OS and render native components for Mobile devices (Android, iOS and Windows 10) and Browser based components for browser

*** Simply import

import Form from "react-json-schema-form/Form";
import Form from "react-json-schema-form/index.css";
 

Example JS schema (ES6)

{
  component: "h2",
  props: {
    className: "w3-form"
  },
  text: "Schema Driven Registration Form!",
  children: [
    {
      component: "BaseInput",
      props: {
        labelText: "User Name",
        placeholder: "Phone number or Email address",
        labelClass: "w3-label",
        type: "text",
        required: "true",
        id: "userName",
        validateOn: "onChange",
        validateRules: [
          {
            rule: "required",
            message: "Phone number or Email address is required"
          }
        ]
      }
    },
    {
      component: "BaseInput",
      props: {
        labelText: "Password",
        type: "password",
        required: "true",
        labelClass: "w3-label",
        id: "password",
        validateOn: "onChange",
        validateRules: [
          {
            rule: "required",
            message: "Password is required"
          }
        ]
      }
    },
    {
      component: "Select",
      props: {
        labelText: "I am a",
        required: "true",
        labelClass: "w3-select",
        id: "userRole",
        validateOn: "onChange",
        validateRules: [
          {
            rule: "required",
            message: "User Role is required"
          }
        ],
        options: [
          { value: "doctor", text: "Doctor" },
          { value: "nurse", text: "Nurse" }
        ],
        optionsUrl:"http://localhost:56772/api/values",
        selectedValue: "nurse"
      }
    },
    {
      component: "Radio",
      props: {
        labelText: "Select Gender",
        type: "radio",
        id: "gender",
        radioGroupName: "gender",
        radioOptions: [
          { value: "male", text:"Male" },
          { value: "female",text:"Female" },
          { value: "notMentioned",text:"Don't want to mention" }
        ],
        defaultValue: "male"
      }
    },
    {
      component: "Checkbox",
      props: {
        labelText: "Agree Terms & Conditions",
        type: "checkbox",
        id: "agreeTerms"
      }
    },
    {
      component: "Button"
    }
  ]
}
 

Rendering

You can render form where ever you want by calling

Complete Example

import React, { Component } from "react";
import Form from "react-json-schema-form/Form";
import formSchema from "./formSchema";
class App extends Component {
 
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <Form schema={formSchema} saveUrl="http://localhost:56772/api/values" />
        </div>
      </div>
    );
  }
}
 
export default App;
 
 

Try the Demo

To run the demo

• npm install
• npm start
• The app will be served at http://localhost:3000