useFormContext

useFormContext is a react hooks to get form instance.

You can import it from fomir-react:

import { useFormContext } from 'fomir-react'

Example usage

This is an example usage to create Reset component:

Loading...

function ResetForm() { const Reset = (props) => { const form = useFormContext() return ( <Box as="button" type="reset" bgBrand500 white px4 py2 rounded cursorPointer onClick={() => form.resetForm()} > {props.node.text} </Box> ) } const form = useForm({ onSubmit(values) { alert(JSON.stringify(values, null, 2)) console.log('values', values) }, components: { Reset, }, children: [ { label: 'First Name', name: 'firstName', component: 'Input', value: 'Curry', }, { label: 'Last Name', name: 'lastName', component: 'Input', value: 'Steve', }, { component: 'Submit', text: 'Submit', }, { component: 'Reset', text: 'Reset', }, ], }) return <Form form={form} /> }

function ResetForm() {
  const Reset = (props) => {
    const form = useFormContext()
    return (
      <Box
        as="button"
        type="reset"
        bgBrand500
        white
        px4
        py2
        rounded
        cursorPointer
        onClick={() => form.resetForm()}
      >
        {props.node.text}
      </Box>
    )
  }
  const form = useForm({
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2))
      console.log('values', values)
    },
    components: {
      Reset,
    },

    children: [
      {
        label: 'First Name',
        name: 'firstName',
        component: 'Input',
        value: 'Curry',
      },
      {
        label: 'Last Name',
        name: 'lastName',
        component: 'Input',
        value: 'Steve',
      },
      {
        component: 'Submit',
        text: 'Submit',
      },
      {
        component: 'Reset',
        text: 'Reset',
      },
    ],
  })

  return <Form form={form} />
}

LIVE DEMO