Nupital Pomp Mesmerises

    ruled-jsonschema-form

    1.0.5 • Public • Published

    ruled-jsonschema-form

    Simple, flexible rule engine for the amazing react-jsonschema-form

    If you are familiar with react-jsonschema-form and interested in adding some dynamism to the forms, for example, hiding/disabling parts of the form, adding extra options to select, radio buttons, changing data and many more, it's worth a try.

    npmjs package

    online demo

    ffmpegui - experimental project based on ruled-jsonschema-form

    Example + some documentation:

    import React, { useState } from 'react'
    import { JSONSchema6 } from "json-schema"
    import RuledJsonSchemaForm, { FormRule } from 'ruled-jsonschema-form' 
     
    /**
     * Defining schema
     */
    const schema = {
      type: "object",
      title: "Personal details",
      properties: {
        name: {
          type: "string",
          title: "Name"
        },
        gender: {
          type: "string",
          title: "Gender",
          enum: ["male", "female"]
        }
      }
    } as JSONSchema6
     
    /**
     * Defining ui schema with form rules
     * 
     * 
     * A form rule is an object containing the following properties:
     * - desc (string, optional): short description of the rule
     * - if (string): expression must be evaluated to boolean
     * - then (string): expression, runs when the above is true
     * - else (string, optional): expression, runs otherwise
     * - active (boolean): flags the rule as active or inactive
     * 
     * 
     * The following values can be used in the scope of the expressions (if, then, else) - check the doc of react-jsonschema-form for the details
     * - formContext (object): "global" form property can hold anything
     * - schema (object): schema of the actually processed node
     * - uiSchema (object): ui schema of the actually processed node
     * - idSchema (object): id schema of the actually processed node
     * - data (object): form data of the actually processed node
     * - arrayUiSchema (object) - in case of the processed item is an array element, the array's uiSchema is offered here
     */ 
    const uiSchema = {
      name: {
        "ui:placeholder": "hint: type 'other' to see other options"
      },
      age: {
      },
      "ui:options": {
        formRules: [
          {
            if: "data && data.name && (data.name.toLowerCase() == 'other')",
            then: "schema.properties.gender.enum = ['male', 'female', 'other']",
            else: "schema.properties.gender.enum = ['male', 'female']",
            active: true
          }
        ]
      }
    }
     
    /**
     * Setup the form as a usual react-jsonschema-form
     */
    const App: React.FC = () => {
     
        const [formData, setFormData] = useState({
            name: "",
            hobbies: [""]
        })
     
        const onChange = (params: any) => {
            setFormData(params.formData)
        }
     
        return ( 
          <RuledJsonSchemaForm
            schema={schema}
            uiSchema={uiSchema}
            onChange={onChange}
            formData={formData}
            autocomplete="off"
          ></RuledJsonSchemaForm> 
      )
     

    Check the source or the online demo for more details

    Install

    npm i ruled-jsonschema-form

    DownloadsWeekly Downloads

    6

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    21.1 kB

    Total Files

    14

    Last publish

    Collaborators

    • nlac