Use plugin

What is Fomir plugin

A plugin is simply a object that implements FomirPlugin interface.

Plugin interface

interface FomirPlugin {
  components?: Record<string, any>

  validators?: Record<string, ValidationRuleFn>

  onFormStateChange?: OnFormStateChange

  onFieldChange?: OnFieldStateChange
}

Create a plugin

const Input = ({ node, handler }) => {
  const { value = '', label } = node
  return (
    <div>
      {label && <div>{label}</div>}
      <input value={value} onChange={handler.handleChange} />
    </div>
  )
}

const Submit = ({ node }) => {
  return <button type="submit">{node.text}</button>
}

const myPlugin = {
  components: {
    Input,
    Submit,
  },
}

Use a plugin

Use a plugin, and register components globally:

Fomir.use(myPlugin)

Use components

Use useForm api to create a form:

Loading...

function BasicForm() { const form = useForm({ onSubmit(values) { alert(JSON.stringify(values, null, 2)) console.log('values', values) }, children: [ { label: 'First Name', name: 'firstName', component: 'Input', value: '', }, { label: 'Last Name', name: 'lastName', component: 'Input', value: '', }, { component: 'Submit', text: 'submit', }, ], }) return <Form form={form} /> }

function BasicForm() {
  const form = useForm({
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2))
      console.log('values', values)
    },
    children: [
      {
        label: 'First Name',
        name: 'firstName',
        component: 'Input',
        value: '',
      },
      {
        label: 'Last Name',
        name: 'lastName',
        component: 'Input',
        value: '',
      },
      {
        component: 'Submit',
        text: 'submit',
      },
    ],
  })

  return <Form form={form} />
}

LIVE DEMO