dynamic-form

Stateful forms on the fly.

Install

npm i @rational-kunal/dynamic-form

Usage

DynamicForm.Form creates a beautiful form for a given schema. Schemas should be passed through DynamicForm.schema to parse it before passing it to the component. See the schemas section to see how to render the different types of complex forms.

import DynamicForm from 'dynamic-form'

const App = () => {
  const [value, setValue] = useState({})
  const schema = DynamicForm.schema({
    Name: 'John Doe',
    Age: Number
  })

  return (
    <DynamicForm.Form
      schema={schema}
      onChange={(newValue) => setValue(newValue)}
      onSubmit={(newValue) => setValue(newValue)}
    />
  )
}

`DynamicForm.Form`

The core component that will render a form for a given schema.

Props	Type	Note
Schema	Object	Schema object parsed by `DynamicForm.schema`
onChange	Function	Function that will be executed with changed value when value in form is changes
onSubmit	Function	Function that will be executed with final value when submit button is pressed

`DynamicForm.type`

Available form types. This will also control how value will be returned through onChange and onSubmit.

TODO: Update notes with nature of types.

Form Types	Note
text	String form that will return `String` value
number	Number form that will return `Number` value
nested	Nested form that will return `Object` value
repeatable	Repeatable form that will return `Array` value

`DynamicForm.schema`

The function parses minimal schema and converts it into an expanded schema that is understandable by DynamicForm.Form.
For minimal schema, the developer given label will be used as a key to store value for the form. For expanded schema, the developer key will be used as a key to store value for the form.
Example of schema:

// Minimal schema
const schema = {
  Name: 'John Doe'
}

// Convert minimal, expanded or mixed schema to expanded schema
let expandedSchema = DynamicForm.schema(schema)

// expaded schema for given minimal schema will look like this
expandedSchema = {
  Name: {
    type: 'DynamicFormType.Text',
    label: 'Name',
    defaultValue: 'John Doe'
  }
}

See examples to see schemas is action.

String schema

// Use this if you just want to create form on the fly.
const stringSchema = {
  '<label>': String || '<Default Value>'
}

// Fine tune some of the aspects.
const stringSchema = {
  '<key>': {
    label: '<label>',
    type: DynamicFormType.text,
    placeholder: '<placeholder>', // Optional
    defaultValue: '' // Optional
  }
}

Number schema

// Use this if you just want to create form on the fly.
const numberSchema = {
  '<label>': Number || '<Default Value>'
}

// Fine tune some of the aspects.
const stringSchema = {
  '<key>': {
    label: '<label>',
    type: DynamicFormType.number,
    placeholder: '<placeholder>', // Optional
    defaultValue: '' // Optional
  }
}

Nested schema

// Use this if you just want to create form on the fly.
const nestedSchema = {
  '<label>': { ... }
}

// Fine tune some of the aspects.
const nestedSchema = {
  '<key>': {
    label: '<label>',
    type: DynamicFormType.nested,
    schema: { ... }
  }
}

Repeated schema

// Use this if you just want to create form on the fly.
const repeatedSchema = {
  '<label>': [{ ... }]
}

// Fine tune some of the aspects.
const repeatedSchema = {
  '<key>': {
    type: DynamicFormType.repeatable,
    schema: { ... }
  }
}

rational-kunal/dynamic-form