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;