Update README

README.md

@@ -1,3 +1,7 @@
 # demos-react-animated-list
 
-Demonstration of a solution for animating a re-ordered React list.
+Demonstration of a solution for animating a re-ordered React list using refs, local state, and a layout effect.
+
+The source code here complements [this blog post](https://matthewcardarelli.com/blog/dev-tricks/2024/08/07/react-animated-list.html). It is for educational purposes, and should not be incorporated into other programs without robust testing.
+
+All files in this repository are distributed under the MIT License.

package.json

@@ -2,10 +2,10 @@
   "name": "demo-react-animated-list",
   "version": "1.0.0",
   "description": "A demo of an implementation of an animated list in React Typescript.",
-  "main": "index.tsx",
+  "main": "src/index.tsx",
   "scripts": {
-    "build": "esbuild index.tsx --bundle --sourcemap --outfile=./dist/demo-react-animated-list.js",
-    "dev": "esbuild index.tsx --bundle --watch --serve --outdir=./public/scripts --servedir=./public",
+    "build": "esbuild ./src/index.tsx --bundle --sourcemap --outfile=./dist/demo-react-animated-list.js",
+    "dev": "esbuild ./src/index.tsx --bundle --watch --serve --outdir=./public/scripts --servedir=./public",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {

src/AnimatedListDemo.tsx

@@ -3,6 +3,16 @@ import { useAnimatedListItems } from './useAnimatedListItems';
 
 type Mutation = 'reverse' | 'randomize' | 'insert' | 'remove';
 
+function getRandomChar(): string {
+  return String.fromCharCode(98 + Math.floor(Math.random() * 25));
+}
+function getRandomItemName(): string {
+  return `Serial Number - ${new Array(16)
+    .fill('')
+    .map(() => getRandomChar())
+    .join('')}`;
+}
+
 /**
  * Randomizer function shamelessly copied unmodified from https://stackoverflow.com/a/12646864
  *
@@ -21,7 +31,7 @@ function shuffleArray(array) {
 
 function insertRandomlyIntoArray(array: string[]): string[] {
   const insertBefore = Math.floor(Math.random() * (array.length + 1));
-  const newItem = `Serial Number ${crypto.randomUUID()}`;
+  const newItem = getRandomItemName();
   if (insertBefore === 0) {
     return [newItem, ...array];
   }
@@ -65,56 +75,52 @@ export const AnimatedListDemo = () => {
       }
       return newState;
     },
-    [
-      `Serial Number ${crypto.randomUUID()}`,
-      `Serial Number ${crypto.randomUUID()}`,
-      `Serial Number ${crypto.randomUUID()}`,
-      `Serial Number ${crypto.randomUUID()}`,
-    ],
+    new Array(4).fill('').map(() => getRandomItemName()),
   );
 
   const { updateItemRef, updateItemPositions, itemStyles } =
     useAnimatedListItems({ keys: items });
 
   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>
-
+    <>
+      <div className="buttons">
+        <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>
+      </div>
       <ol>
         {items.map((item) => {
           return (
@@ -128,6 +134,6 @@ export const AnimatedListDemo = () => {
           );
         })}
       </ol>
-    </main>
+    </>
   );
 };

src/index.tsx

@@ -10,7 +10,7 @@ class AnimatedListComponent extends HTMLElement {
   }
 
   connectedCallback() {
-    const rootNode = document.createElement('main');
+    const rootNode = document.createElement('section');
     this.appendChild(rootNode);
     this.root = createRoot(rootNode);
     this.root.render(<AnimatedListDemo />);

tsconfig.json

@@ -8,5 +8,11 @@
     "noEmit": true,
     "alwaysStrict": true
   },
-  "include": ["*.ts", "*.tsx"]
+  "include": [
+    "*.ts",
+    "*.tsx",
+    "src/index.tsx",
+    "src/AnimatedListDemo.tsx",
+    "src/useAnimatedListItems.ts"
+  ]
 }