Getting started

Installation

To get started, you need to install tow package:

• Core package fomir
• React binding package fomir-react

Using Yarn:

yarn add fomir fomir-react

Using NPM:

npm install fomir fomir-react

Basic usage

Use useForm api to create a form:

import { Form, useForm } from 'fomir-react'

Loading...

function BasicForm() { const Input = ({ node, handler }) => { const { value = '', label } = node return ( <div class="field-input"> {label && <div>{label}</div>} <input value={value} onChange={handler.handleChange} /> </div> ) } const Submit = ({ node }) => { return <button class="btn-submit" type="submit">{node.text}</button> } const form = useForm({ onSubmit(values) { alert(JSON.stringify(values, null, 2)) console.log('values', values) }, // register component components: { Input, Submit, }, children: [ { label: 'First Name', name: 'firstName', component: 'Input', // use registered compone value: '', }, { label: 'Last Name', name: 'lastName', component: 'Input', value: '', }, { component: 'Submit', text: 'submit', }, ], }) return <Form form={form} /> }

function BasicForm() {
  const Input = ({ node, handler }) => {
    const { value = '', label } = node
    return (
      <div class="field-input">
        {label && <div>{label}</div>}
        <input value={value} onChange={handler.handleChange} />
      </div>
    )
  }

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

  const form = useForm({
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2))
      console.log('values', values)
    },
    // register component
    components: {
      Input,
      Submit,
    },

    children: [
      {
        label: 'First Name',
        name: 'firstName',
        component: 'Input', // use registered compone
        value: '',
      },
      {
        label: 'Last Name',
        name: 'lastName',
        component: 'Input',
        value: '',
      },
      {
        component: 'Submit',
        text: 'submit',
      },
    ],
  })

  return <Form form={form} />
}

LIVE DEMO