
Security News
Create React App Officially Deprecated Amid React 19 Compatibility Issues
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
react-final-form
Advanced tools
🏁 High performance subscription-based form state management for React
react-final-form is a framework-agnostic form state management library for React. It provides a simple and flexible way to manage form state, validation, and submission handling in React applications.
Form State Management
This feature allows you to manage the state of your form fields. The code sample demonstrates a simple form with two fields, 'firstName' and 'lastName', and a submit button. The form state is managed and displayed in real-time.
const MyForm = () => (
<Form
onSubmit={formValues => {
console.log(formValues);
}}
render={({ handleSubmit, form, submitting, pristine, values }) => (
<form onSubmit={handleSubmit}>
<div>
<label>First Name</label>
<Field name="firstName" component="input" type="text" placeholder="First Name" />
</div>
<div>
<label>Last Name</label>
<Field name="lastName" component="input" type="text" placeholder="Last Name" />
</div>
<div>
<button type="submit" disabled={submitting || pristine}>
Submit
</button>
</div>
<pre>{JSON.stringify(values, 0, 2)}</pre>
</form>
)}
/>
);
Field-Level Validation
This feature allows you to add validation to individual fields. The code sample shows how to add a 'required' validation to the 'firstName' and 'lastName' fields.
const required = value => (value ? undefined : 'Required');
const MyForm = () => (
<Form
onSubmit={formValues => {
console.log(formValues);
}}
render={({ handleSubmit }) => (
<form onSubmit={handleSubmit}>
<div>
<label>First Name</label>
<Field name="firstName" component="input" type="text" placeholder="First Name" validate={required} />
</div>
<div>
<label>Last Name</label>
<Field name="lastName" component="input" type="text" placeholder="Last Name" validate={required} />
</div>
<div>
<button type="submit">
Submit
</button>
</div>
</form>
)}
/>
);
Form-Level Validation
This feature allows you to add validation to the entire form. The code sample demonstrates how to validate the 'firstName' and 'lastName' fields at the form level.
const validate = values => {
const errors = {};
if (!values.firstName) {
errors.firstName = 'Required';
}
if (!values.lastName) {
errors.lastName = 'Required';
}
return errors;
};
const MyForm = () => (
<Form
onSubmit={formValues => {
console.log(formValues);
}}
validate={validate}
render={({ handleSubmit }) => (
<form onSubmit={handleSubmit}>
<div>
<label>First Name</label>
<Field name="firstName" component="input" type="text" placeholder="First Name" />
</div>
<div>
<label>Last Name</label>
<Field name="lastName" component="input" type="text" placeholder="Last Name" />
</div>
<div>
<button type="submit">
Submit
</button>
</div>
</form>
)}
/>
);
Formik is a popular form library for React that provides a higher-level API for managing form state, validation, and submission. It is similar to react-final-form but offers more built-in hooks and components for easier integration.
React Hook Form is a performant, flexible, and extensible form library for React. It uses hooks to manage form state and validation, making it a lightweight alternative to react-final-form with a focus on performance.
Redux Form is a form state management library that integrates with Redux. It is similar to react-final-form but is more tightly coupled with Redux, making it suitable for applications that already use Redux for state management.
You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of React Final Form.
💰 Wanna get paid the big bucks writing React? Take this quiz and get offers from top tech companies! 💰
✅ Zero dependencies (that affect your bundle size)
✅ Only peer dependencies: React and 🏁 Final Form
✅ Opt-in subscriptions - only update on the state you need!
✅ 💥 3.0k gzipped 💥
Comprehensive JS framework and UI components for building enterprise-grade web apps.
In the interest of making 🏁 React Final Form the best library it can be, we'd love your thoughts and feedback.
React Final Form is a thin React wrapper for Final Form, which is a subscriptions-based form state management library that uses the Observer pattern, so only the components that need updating are re-rendered as the form's state changes.
FAQs
🏁 High performance subscription-based form state management for React
The npm package react-final-form receives a total of 286,188 weekly downloads. As such, react-final-form popularity was classified as popular.
We found that react-final-form demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.