useRepeatable

useRepeatable is a React hook that helps to make "repeater fields" simple. Given an array of a particular type of objects, it exposes simple methods to add, remove or reorder objects, while exposing the objects on a React state variable.

You can also assign a callback function for when changes happen to the array of objects.

Example Usage

import { RepeatableList } from "@thegoodwork/use-repeatable";
import React, { useState } from "react";
import { monsterList, randomMonster } from "utils";
import { MonsterCard } from "components";
import type { Monster } from "types";

// default new item is required
const monster: Monster = randomMonster(monsterList);

// optionally initialise with collection of objects
const initialMonsters = [monsterList[0], monsterList[1]];

function App() {
  const [monsters, setMonsters] = useState<(Monster & { id: string })[]>([]);

  const { items, removeItem, addItem, moveItem } = useRepeatable({
    newItem: monster,
    initialState: initialMonsters,
    onChange: (items: (Monster & { id: string })[]) => {
      setMonsters(items);
    },
  });

  return (
    <div className="repeatableList">
      {items.map((item, index) => {
        return (
          <MonsterCard
            key={item.id}
            moveItem={moveItem}
            item={item}
            index={index}
            removeItem={removeItem}
          />
        );
      })}
      <button
        className="addButton"
        onClick={() => {
          addItem();
        }}
      >
        Recruit More Monsters!
      </button>
    </div>
  );
}

RepeatableList

Alternatively, you may use the component RepeatableList to integrate your repeatable list seamlessly within your React code. The RepeatableList provides functional components Card and Layout as props that allows you to compose your repeatable list.

Example Usage

import { RepeatableList } from "@thegoodwork/use-repeatable";
import React, { useState } from "react";
import { monsterList, randomMonster } from "utils";
import { MonsterCard } from "components";
import type { Monster } from "types";

function App() {
  const monster: Monster = randomMonster(monsterList);
  const [monsters, setMonsters] = useState<(Monster & { id: string })[]>([]);

  return (
    <RepeatableList
      onChange={(items) => {
        setMonsters(items);
      }}
      initialState={[]}
      newItem={monster}
      Card={({ DragHandle, item, index, removeItem }) => (
        <MonsterCard
          DragHandle={DragHandle}
          item={item}
          index={index}
          removeItem={removeItem}
        />
      )}
      Layout={({ Cards, addItem }) => {
        return (
          <div className="repeatableList">
            <div>{Cards}</div>
            <button
              className="addButton"
              onClick={() => {
                addItem();
              }}
            >
              Recruit More Monsters!
            </button>
          </div>
        );
      }}
    />
  );
}