formfusion NPM Version
LearnBlogPlayground

Integration with Reactstrap

Integrating FormFusion with Reactstrap is a straightforward process. To accomplish this, you can use the connect method along with the UseForm hook to initialize your form's configuration.


For a successful implementation of the connect method, you'll need access to the form configuration object and to select the input type or validation pattern that aligns with your requirements.


Important Note: To leverage the potential of the connect method, it's important to call it on the lower-level input component rendered by Reactstrap. This ensures the synchronization of FormFusion with the Reactstrap framework.

Example

import { Input, Button, FormText } from 'reactstrap';
import { Form, useForm, connect } from 'formfusion';

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

  return (
    <Form config={config} className="m-3">
      <Input
        {...connect(config, 'alphabetic')}
        invalid={Boolean(config.errors.firstName)}
        id="firstName"
        name="firstName"
      />
      <FormText>{config.errors.firstName}</FormText>
      <br />
      <Button color="primary" type="submit" className="mt-3">
        Submit
      </Button>
    </Form>
  );
};

export default MyForm;