Full demo!

AnimatedListDemo.tsx

@@ -3,19 +3,74 @@ import { useAnimatedListItems } from './useAnimatedListItems';
 
 type Mutation = 'reverse' | 'randomize' | 'insert' | 'remove';
 
+/**
+ * Randomizer function shamelessly copied unmodified from https://stackoverflow.com/a/12646864
+ *
+ * License: https://creativecommons.org/licenses/by-sa/4.0/
+ *
+ * Author(s):
+ * - https://stackoverflow.com/users/310500/laurens-holst
+ * - https://stackoverflow.com/users/8112776/ashleedawg
+ */
+function shuffleArray(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+}
+
+function insertRandomlyIntoArray(array: string[]): string[] {
+  const insertBefore = Math.floor(Math.random() * (array.length + 1));
+  const newItem = `Serial Number ${crypto.randomUUID()}`;
+  if (insertBefore === 0) {
+    return [newItem, ...array];
+  }
+  return [
+    ...array.slice(0, insertBefore),
+    newItem,
+    ...array.slice(insertBefore),
+  ];
+}
+
+function removeRandomlyFromArray(array: string[]): string[] {
+  const removeIndex = Math.floor(Math.random() * array.length);
+  if (removeIndex === 0) {
+    return [...array.slice(1)];
+  }
+  if (removeIndex === array.length) {
+    return [...array.slice(0, -1)];
+  }
+  return [...array.slice(0, removeIndex), ...array.slice(removeIndex + 1)];
+}
+
 export const AnimatedListDemo = () => {
   const [items, mutateItems] = useReducer(
     (prevState: string[], mutation: Mutation) => {
+      let newState: string[] = [...prevState];
       switch (mutation) {
         case 'reverse':
-          const newState = [...prevState];
           newState.reverse();
-          return newState;
+          break;
+        case 'randomize':
+          shuffleArray(newState);
+          break;
+        case 'insert':
+          newState = insertRandomlyIntoArray(newState);
+          break;
+        case 'remove':
+          newState = removeRandomlyFromArray(newState);
+          break;
         default:
           return prevState;
       }
+      return newState;
     },
-    ['Item 0', 'Item 1', 'Item 2', 'Item 3'],
+    [
+      `Serial Number ${crypto.randomUUID()}`,
+      `Serial Number ${crypto.randomUUID()}`,
+      `Serial Number ${crypto.randomUUID()}`,
+      `Serial Number ${crypto.randomUUID()}`,
+    ],
   );
 
   const { updateItemRef, updateItemPositions, itemStyles } =
@@ -23,6 +78,43 @@ export const AnimatedListDemo = () => {
 
   return (
     <main>
+      <button
+        type="button"
+        onClick={() => {
+          updateItemPositions();
+          mutateItems('reverse');
+        }}
+      >
+        Reverse
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          updateItemPositions();
+          mutateItems('randomize');
+        }}
+      >
+        Randomize
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          updateItemPositions();
+          mutateItems('insert');
+        }}
+      >
+        Insert
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          updateItemPositions();
+          mutateItems('remove');
+        }}
+      >
+        Remove
+      </button>
+
       <ol>
         {items.map((item) => {
           return (
@@ -36,15 +128,6 @@ export const AnimatedListDemo = () => {
           );
         })}
       </ol>
-      <button
-        type="button"
-        onClick={() => {
-          updateItemPositions();
-          mutateItems('reverse');
-        }}
-      >
-        Reverse
-      </button>
     </main>
   );
 };