Connect

The connect method provides you with the flexibility to integrate FormFusion into your custom Field component, offering a alternative to FormFusion's default Input or Textarea elements.

Connect is not limited to just custom Field components; it also plays a crutial role in integrating FormFusion with various UI libraries, amplifying the potential of your web applications. For a step-by-step guide on these integrations, refer to the instructions provided in the Integrations section.

It's worth highlighting that the connect method works in synergy with the UseForm hook, ensuring a harmonious and efficient form management process.

Available parameters

configRequired
The config parameter pertains to the form configuration, which is the object returned when you invoke the 'useForm()' function.
Type: object

type
The FormFusion input type or validation pattern you intend to apply to the field.
Type: string

Example

import { Form, useForm, connect } from 'formfusion';
import './App.css';

const MyForm = () => {
  const config = useForm({
    onSubmit: (e) => {
      console.log('Success ' + JSON.stringify(e));
    },
    validateOnChange: true,
  });

  return (
    <Form config={config} className="form">
      <input
        {...connect(config, 'alphabetic')}
        id="alphabetic"
        name="firstName"
        className="form__field"
      />
      {config.errors.firstName}
      <button type="submit">Submit</button>
    </Form>
  );
};

export default MyForm;