Security News
PyPI’s New Archival Feature Closes a Major Security Gap
PyPI now allows maintainers to archive projects, improving security and helping users make informed decisions about their dependencies.
final-form-arrays
Advanced tools
The final-form-arrays package is an extension for Final Form that provides utilities for managing arrays in forms. It simplifies the process of handling dynamic fields, such as adding, removing, and reordering items in an array within a form.
Adding Items to an Array
This feature allows you to dynamically add items to an array within a form. The code sample demonstrates how to use the FieldArray component to manage a list of friends, with the ability to add new friends and remove existing ones.
const { FieldArray } = require('final-form-arrays');
<FieldArray name="friends">
{({ fields }) => (
<div>
{fields.map((name, index) => (
<div key={name}>
<label>Friend #{index + 1}</label>
<Field name={`${name}.firstName`} component="input" placeholder="First Name" />
<Field name={`${name}.lastName`} component="input" placeholder="Last Name" />
<span onClick={() => fields.remove(index)}>-</span>
</div>
))}
<button type="button" onClick={() => fields.push({})}>Add Friend</button>
</div>
)}
</FieldArray>
Removing Items from an Array
This feature allows you to remove items from an array within a form. The code sample shows how to use the FieldArray component to manage a list of friends, with the ability to remove a friend by clicking a button.
const { FieldArray } = require('final-form-arrays');
<FieldArray name="friends">
{({ fields }) => (
<div>
{fields.map((name, index) => (
<div key={name}>
<label>Friend #{index + 1}</label>
<Field name={`${name}.firstName`} component="input" placeholder="First Name" />
<Field name={`${name}.lastName`} component="input" placeholder="Last Name" />
<span onClick={() => fields.remove(index)}>-</span>
</div>
))}
</div>
)}
</FieldArray>
Reordering Items in an Array
This feature allows you to reorder items in an array within a form. The code sample demonstrates how to use the FieldArray component to manage a list of friends, with the ability to move a friend up or down in the list.
const { FieldArray } = require('final-form-arrays');
<FieldArray name="friends">
{({ fields }) => (
<div>
{fields.map((name, index) => (
<div key={name}>
<label>Friend #{index + 1}</label>
<Field name={`${name}.firstName`} component="input" placeholder="First Name" />
<Field name={`${name}.lastName`} component="input" placeholder="Last Name" />
<span onClick={() => fields.move(index, index - 1)}>↑</span>
<span onClick={() => fields.move(index, index + 1)}>↓</span>
</div>
))}
</div>
)}
</FieldArray>
react-final-form-arrays is a similar package that provides array field management for React Final Form. It offers similar functionalities such as adding, removing, and reordering items in an array. The main difference is that it is specifically designed to work with React Final Form, whereas final-form-arrays can be used with any Final Form implementation.
Formik is a popular form library for React that also provides utilities for managing arrays in forms. It offers similar functionalities such as dynamic field arrays, validation, and more. Formik is more comprehensive and provides a wider range of features beyond just array management, making it a more versatile choice for complex form handling.
react-hook-form is another popular form library for React that provides efficient and flexible form handling, including array field management. It offers similar functionalities such as adding, removing, and reordering items in an array. react-hook-form is known for its performance and minimal re-renders, making it a good choice for performance-sensitive applications.
FAQs
Array Mutators for 🏁 Final Form
The npm package final-form-arrays receives a total of 155,725 weekly downloads. As such, final-form-arrays popularity was classified as popular.
We found that final-form-arrays 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
PyPI now allows maintainers to archive projects, improving security and helping users make informed decisions about their dependencies.
Research
Security News
Malicious npm package postcss-optimizer delivers BeaverTail malware, targeting developer systems; similarities to past campaigns suggest a North Korean connection.
Security News
CISA's KEV data is now on GitHub, offering easier access, API integration, commit history tracking, and automated updates for security teams and researchers.