final-form-arrays

What is final-form-arrays?

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.

What are final-form-arrays's main functionalities?

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>

Other packages similar to final-form-arrays

react-final-form-arrays

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

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

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.

README

🏁 Final Form Arrays

Mutators for updating array fields in 🏁 Final Form.

---

Installation

npm install --save final-form-arrays

or

yarn add final-form-arrays

Usage

import { createForm } from 'final-form'
import arrayMutators from 'final-form-arrays'

// Create Form
const form = createForm({
  mutators: { ...arrayMutators },
  onSubmit
})

// push
form.mutators.push('customers', { firstName: '', lastName: '' })

// pop
const customer = form.mutators.pop('customers')

Table of Contents

• Mutators
  • form.mutators.insert(name: string, index: number, value: any) => undefined
  • form.mutators.move(name: string, from: number, to: number) => undefined
  • form.mutators.pop(name: string) => any
  • form.mutators.push(name: string, value: any) => void
  • form.mutators.remove(name: string, index: number) => any
  • form.mutators.shift(name: string) => any
  • form.mutators.swap(name: string, indexA: number, indexB: number) => void
  • form.mutators.update(name: string, index: number, value: any) => void
  • form.mutators.unshift(name: string, value: any) => void

Mutators

form.mutators.insert(name: string, index: number, value: any) => undefined

Inserts a value into the specified index of the array field.

form.mutators.move(name: string, from: number, to: number) => undefined

Moves a value from one index to another index in the array field.

form.mutators.pop(name: string) => any

Pops a value off the end of an array field. Returns the value.

form.mutators.push(name: string, value: any) => void

Pushes a value onto the end of an array field.

form.mutators.remove(name: string, index: number) => any

Removes a value from the specified index of the array field. Returns the removed value.

form.mutators.shift(name: string) => any

Removes a value from the beginning of the array field. Returns the value.

form.mutators.swap(name: string, indexA: number, indexB: number) => void

Swaps the position of two values in the array field.

form.mutators.update(name: string, index: number, value: any) => void

Updates a value of the specified index of the array field.

form.mutators.unshift(name: string, value: any) => void

Inserts a value onto the beginning of the array field.