useFieldState

useFieldState is a react hooks to subscribe field state by name path. if field state is changed, the component using useFieldState will rerender.

You can import it from fomir-react:

import { useFieldState } from 'fomir-react'

Example usage

Loading...

function FormDemo() { const NameValue = () => { const { value } = useFieldState('userName') return <div>Name: {value}</div> } const form = useForm({ onSubmit(values) { alert(JSON.stringify(values, null, 2)) console.log('values', values) }, // register component components: { NameValue, }, children: [ { component: 'NameValue' }, { name: 'userName', component: 'Input', value: 'Bill', }, { component: 'Submit', text: 'submit', }, ], }) return <Form form={form} /> }

function FormDemo() {
  const NameValue = () => {
    const { value } = useFieldState('userName')
    return <div>Name: {value}</div>
  }
  const form = useForm({
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2))
      console.log('values', values)
    },
    // register component
    components: {
      NameValue,
    },

    children: [
      { component: 'NameValue' },
      {
        name: 'userName',
        component: 'Input',
        value: 'Bill',
      },
      {
        component: 'Submit',
        text: 'submit',
      },
    ],
  })

  return <Form form={form} />
}

LIVE DEMO