docs(reorder): update onIonItemReorder -> onIonReorderEnd

ionic-team · brandyscarney · Jun 23, 2025 · Jun 12, 2025 · Jun 12, 2025 · Jun 12, 2025
commit 4a6ee9b50e69478d21909bc26eece0bf816f94ce
diff --git a/docs/api/reorder-group.md b/docs/api/reorder-group.md
@@ -16,9 +16,9 @@ import Slots from '@ionic-internal/component-api/v8/reorder-group/slots.md';
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 
-The reorder group is a container for items using the [reorder](./reorder) component. When the user drags an item and drops it in a new position, the `ionItemReorder` event is dispatched. A handler for this event should be implemented that calls the `complete` method.
+The reorder group is a container for items using the [reorder](./reorder) component. When the user drags an item and drops it in a new position, the `ionReorderEnd` event is dispatched. A handler for this event should be implemented that calls the `complete` method.
 
-The `detail` property of the `ionItemReorder` event includes all of the relevant information about the reorder operation, including the `from` and `to` indexes. In the context of reordering, an item moves `from` an index `to` a new index. For example usage of the reorder group, see the [reorder](./reorder) documentation.
+The `detail` property of the `ionReorderEnd` event includes all of the relevant information about the reorder operation, including the `from` and `to` indexes. In the context of reordering, an item moves `from` an index `to` a new index. For example usage of the reorder group, see the [reorder](./reorder) documentation.
 
 
 ## Interfaces

diff --git a/docs/api/reorder.md b/docs/api/reorder.md
@@ -20,7 +20,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 Reorder is a component that allows an item to be dragged to change its order within a group of items. It must be used within a [reorder group](./reorder-group) to provide a visual drag and drop interface.
 
-The reorder is the anchor used to drag and drop the items. Once the reorder is complete, the `ionItemReorder` event will be dispatched from the reorder group and the `complete` method needs to be called.
+The reorder is the anchor used to drag and drop the items. Once the reorder is complete, the `ionReorderEnd` event will be dispatched from the reorder group and the `complete` method needs to be called.
 
 
 ## Basic Usage

diff --git a/static/demos/api/reorder/index.html b/static/demos/api/reorder/index.html
@@ -99,7 +99,7 @@
       function toggleReorder() {
         const reorderGroup = document.getElementById('reorder');
         reorderGroup.disabled = !reorderGroup.disabled;
-        reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
+        reorderGroup.addEventListener('ionReorderEnd', ({ detail }) => {
           detail.complete(true);
         });
       }

diff --git a/static/usage/v8/reorder/basic/react.md b/static/usage/v8/reorder/basic/react.md
@@ -17,7 +17,7 @@ function Example() {
   return (
     <IonList>
       {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
-      <IonReorderGroup disabled={false} onIonItemReorder={handleReorder}>
+      <IonReorderGroup disabled={false} onIonReorderEnd={handleReorder}>
         <IonItem>
           <IonLabel>Item 1</IonLabel>
           <IonReorder slot="end"></IonReorder>

diff --git a/static/usage/v8/reorder/custom-icon/react.md b/static/usage/v8/reorder/custom-icon/react.md
@@ -18,7 +18,7 @@ function Example() {
   return (
     <IonList>
       {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
-      <IonReorderGroup disabled={false} onIonItemReorder={handleReorder}>
+      <IonReorderGroup disabled={false} onIonReorderEnd={handleReorder}>
         <IonItem>
           <IonLabel>Item 1</IonLabel>
           <IonReorder slot="end">

diff --git a/static/usage/v8/reorder/custom-scroll-target/react/main_tsx.md b/static/usage/v8/reorder/custom-scroll-target/react/main_tsx.md
@@ -29,7 +29,7 @@ function Example() {
       <div className="ion-content-scroll-host">
         <IonList>
           {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
-          <IonReorderGroup disabled={false} onIonItemReorder={handleReorder}>
+          <IonReorderGroup disabled={false} onIonReorderEnd={handleReorder}>
             <IonItem>
               <IonLabel>Item 1</IonLabel>
               <IonReorder slot="end"></IonReorder>

diff --git a/static/usage/v8/reorder/toggling-disabled/react.md b/static/usage/v8/reorder/toggling-disabled/react.md
@@ -31,7 +31,7 @@ function Example() {
   return (
     <>
       <IonList>
-        <IonReorderGroup disabled={isDisabled} onIonItemReorder={handleReorder}>
+        <IonReorderGroup disabled={isDisabled} onIonReorderEnd={handleReorder}>
           <IonItem>
             <IonLabel>Item 1</IonLabel>
             <IonReorder slot="end"></IonReorder>

diff --git a/static/usage/v8/reorder/updating-data/react.md b/static/usage/v8/reorder/updating-data/react.md
@@ -22,7 +22,7 @@ function Example() {
   return (
     <IonList>
       {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
-      <IonReorderGroup disabled={false} onIonItemReorder={handleReorder}>
+      <IonReorderGroup disabled={false} onIonReorderEnd={handleReorder}>
         {items.map((item) => (
           <IonItem key={item}>
             <IonLabel>Item {item}</IonLabel>

diff --git a/static/usage/v8/reorder/wrapper/react.md b/static/usage/v8/reorder/wrapper/react.md
@@ -17,7 +17,7 @@ function Example() {
   return (
     <IonList>
       {/* The reorder gesture is disabled by default, enable it to drag and drop items */}
-      <IonReorderGroup disabled={false} onIonItemReorder={handleReorder}>
+      <IonReorderGroup disabled={false} onIonReorderEnd={handleReorder}>
         <IonReorder>
           <IonItem>
             <IonLabel>Item 1</IonLabel>