Package Exports

react-json-schema-form/BaseInput
react-json-schema-form/Checkbox
react-json-schema-form/FloatInput
react-json-schema-form/Form
react-json-schema-form/Input
react-json-schema-form/Radio
react-json-schema-form/Select
react-json-schema-form/Switch
react-json-schema-form/api
react-json-schema-form/index.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-json-schema-form) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

JSX is not a dependency for react-json-schema-form.

Quick Documentation

Full Documentation

Schema
Rendering
Complete Example
[Try the Demo](#Try the Demo)

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