top of page
Logo der Online Agentur mdwp

react-final-form

React Final Form is a library for form handling in the JavaScript framework ReactJS. It provides a minimal API to achieve maximum functionality when working with forms. It applies the concept of controlled components, which informs ReactJS what its state should be and react to changes in that state.

React Final Form helps in validating, formatting, manipulating, warning, tracking data, showing errors and submission of form data.

One can use React Final Form by installing it via npm by using the following command:

```
npm install --save final-form react-final-form
```

Simple Form Example in React Final Form:

Here we have a simple form for taking a "First Name". This form will throw an error if the input is left empty.

```jsx
import React from "react";
import { Form, Field } from "react-final-form";

export default function SimpleForm() {
const onSubmit = formValues => {
console.log(formValues);
};
return (
<Form
onSubmit={onSubmit}
render={({ handleSubmit, form, submitting, pristine }) => (
<form onSubmit={handleSubmit}>
<div>
<label>First Name</label>
<Field
name="firstName"
component="input"
type="text"
placeholder="First Name"
validate={value => (value ? undefined : "Required")}
/>
</div>
<button type="submit" disabled={submitting || pristine}>
Submit
</button>
<button
type="button"
onClick={form.reset}
disabled={submitting || pristine}
>
Reset
</button>
</form>
)}
/>
);
}
```

In this code we've imported Form and Field from 'react-final-form'. We've defined a form with a single field - "First Name", with a validation to check if it has a value. If the value is left empty, an error of "Required" will show.

This is a very simple usage of React Final Form. It can be extended with more complex logic and additional functionality as required.

bottom of page