@rational-kunal/dynamic-form v0.0.10

NOTE: 🚧 Documentaion is in progress 🚧

dynamic-form

Statefull 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.

DynamicForm.type

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

TODO: Update notes with nature of types.

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: { ... }
  }
}

License

MIT © rational-kunal