useFormState

useFormState is a react hooks to subscribe form state. if form state is changed, the component using useFormState will rerender.

You can import it from fomir-react:

import { useFormState } from 'fomir-react'

Submitting Example

This is an example usage for subscribing submitting status:

Loading...

function FormDemo() { const SubmitButton = (props) => { const { submitting } = useFormState() return ( <button type="submit" disabled={submitting}> {props.node.text} {submitting ? '...' : ''} </button> ) } const form = useForm({ onSubmit(values) { console.log('values', values) setTimeout(() => { form.setSubmitting(false) }, 2000) }, components: { SubmitButton, }, children: [ { name: 'firstName', component: 'Input', value: 'Steve', }, { component: 'SubmitButton', text: 'Submit', }, ], }) return <Form form={form} /> }

function FormDemo() {
  const SubmitButton = (props) => {
    const { submitting } = useFormState()
    return (
      <button type="submit" disabled={submitting}>
        {props.node.text}
        {submitting ? '...' : ''}
      </button>
    )
  }

  const form = useForm({
    onSubmit(values) {
      console.log('values', values)
      setTimeout(() => {
        form.setSubmitting(false)
      }, 2000)
    },
    components: {
      SubmitButton,
    },

    children: [
      {
        name: 'firstName',
        component: 'Input',
        value: 'Steve',
      },
      {
        component: 'SubmitButton',
        text: 'Submit',
      },
    ],
  })

  return <Form form={form} />
}

LIVE DEMO

SubmitCount Example

This is an example usage for subscribing submitCount status:

Loading...

function FormDemo() { const SubmitCount = (props) => { const { submitCount } = useFormState() return <div>count: {submitCount}</div> } const form = useForm({ onSubmit(values) { console.log('values', values) }, components: { SubmitCount, }, children: [ { component: 'SubmitCount' }, { name: 'firstName', component: 'Input', value: 'Steve', }, { component: 'Submit', text: 'Submit', }, ], }) return <Form form={form} /> }

function FormDemo() {
  const SubmitCount = (props) => {
    const { submitCount } = useFormState()
    return <div>count: {submitCount}</div>
  }

  const form = useForm({
    onSubmit(values) {
      console.log('values', values)
    },
    components: {
      SubmitCount,
    },

    children: [
      { component: 'SubmitCount' },
      {
        name: 'firstName',
        component: 'Input',
        value: 'Steve',
      },
      {
        component: 'Submit',
        text: 'Submit',
      },
    ],
  })

  return <Form form={form} />
}

LIVE DEMO

Form state

Form state come from form schema root node:

interface FormSchema {
  submitting?: boolean
  submitted?: boolean
  submitCount?: number

  validating?: boolean
  dirty?: boolean
  valid?: boolean
  status?: Status

  labelWidth?: number | string

  [key: string]: any
}