docs(reorder): rename handleReorder functions to handleReorderEnd

ionic-team · brandyscarney · Jun 23, 2025 · Jun 12, 2025 · Jun 12, 2025 · Jun 12, 2025
commit 01f0b2efc7557f99163d57ba1f9090c3c6ca2619
diff --git a/static/usage/v8/reorder/basic/angular/example_component_html.md b/static/usage/v8/reorder/basic/angular/example_component_html.md
@@ -2,7 +2,7 @@
 <ion-list>
   <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
   <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
-  <ion-reorder-group [disabled]="false" (ionReorderEnd)="handleReorder($any($event))">
+  <ion-reorder-group [disabled]="false" (ionReorderEnd)="handleReorderEnd($any($event))">
     <ion-item>
       <ion-label> Item 1 </ion-label>
       <ion-reorder slot="end"></ion-reorder>

diff --git a/static/usage/v8/reorder/basic/angular/example_component_ts.md b/static/usage/v8/reorder/basic/angular/example_component_ts.md
@@ -16,7 +16,7 @@ import {
   imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
-  handleReorder(event: ReorderEndCustomEvent) {
+  handleReorderEnd(event: ReorderEndCustomEvent) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
     console.log('Dragged from index', event.detail.from, 'to', event.detail.to);

diff --git a/static/usage/v8/reorder/basic/react.md b/static/usage/v8/reorder/basic/react.md
@@ -3,7 +3,7 @@ import React from 'react';
 import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/react';
 
 function Example() {
-  function handleReorder(event: ReorderEndCustomEvent) {
+  function handleReorderEnd(event: ReorderEndCustomEvent) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
     console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
@@ -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} onIonReorderEnd={handleReorder}>
+      <IonReorderGroup disabled={false} onIonReorderEnd={handleReorderEnd}>
         <IonItem>
           <IonLabel>Item 1</IonLabel>
           <IonReorder slot="end"></IonReorder>

diff --git a/static/usage/v8/reorder/basic/vue.md b/static/usage/v8/reorder/basic/vue.md
@@ -2,7 +2,7 @@
 <template>
   <ion-list>
     <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
-    <ion-reorder-group :disabled="false" @ionReorderEnd="handleReorder($event)">
+    <ion-reorder-group :disabled="false" @ionReorderEnd="handleReorderEnd($event)">
       <ion-item>
         <ion-label> Item 1 </ion-label>
         <ion-reorder slot="end"></ion-reorder>
@@ -38,7 +38,7 @@
   export default defineComponent({
     components: { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
     setup() {
-      const handleReorder = (event: ReorderEndCustomEvent) => {
+      const handleReorderEnd = (event: ReorderEndCustomEvent) => {
         // The `from` and `to` properties contain the index of the item
         // when the drag started and ended, respectively
         console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
@@ -49,7 +49,7 @@
         event.detail.complete();
       };
 
-      return { handleReorder };
+      return { handleReorderEnd };
     },
   });
 </script>

diff --git a/static/usage/v8/reorder/custom-icon/angular/example_component_html.md b/static/usage/v8/reorder/custom-icon/angular/example_component_html.md
@@ -2,7 +2,7 @@
 <ion-list>
   <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
   <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
-  <ion-reorder-group [disabled]="false" (ionReorderEnd)="handleReorder($any($event))">
+  <ion-reorder-group [disabled]="false" (ionReorderEnd)="handleReorderEnd($any($event))">
     <ion-item>
       <ion-label> Item 1 </ion-label>
       <ion-reorder slot="end">

diff --git a/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md b/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md
@@ -29,7 +29,7 @@ export class ExampleComponent {
     addIcons({ pizza });
   }
 
-  handleReorder(event: ReorderEndCustomEvent) {
+  handleReorderEnd(event: ReorderEndCustomEvent) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
     console.log('Dragged from index', event.detail.from, 'to', event.detail.to);

diff --git a/static/usage/v8/reorder/custom-icon/react.md b/static/usage/v8/reorder/custom-icon/react.md
@@ -4,7 +4,7 @@ import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, Reord
 import { pizza } from 'ionicons/icons';
 
 function Example() {
-  function handleReorder(event: ReorderEndCustomEvent) {
+  function handleReorderEnd(event: ReorderEndCustomEvent) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
     console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
@@ -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} onIonReorderEnd={handleReorder}>
+      <IonReorderGroup disabled={false} onIonReorderEnd={handleReorderEnd}>
         <IonItem>
           <IonLabel>Item 1</IonLabel>
           <IonReorder slot="end">

diff --git a/static/usage/v8/reorder/custom-icon/vue.md b/static/usage/v8/reorder/custom-icon/vue.md
@@ -2,7 +2,7 @@
 <template>
   <ion-list>
     <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
-    <ion-reorder-group :disabled="false" @ionReorderEnd="handleReorder($event)">
+    <ion-reorder-group :disabled="false" @ionReorderEnd="handleReorderEnd($event)">
       <ion-item>
         <ion-label> Item 1 </ion-label>
         <ion-reorder slot="end">
@@ -49,7 +49,7 @@
   export default defineComponent({
     components: { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
     setup() {
-      const handleReorder = (event: ReorderEndCustomEvent) => {
+      const handleReorderEnd = (event: ReorderEndCustomEvent) => {
         // The `from` and `to` properties contain the index of the item
         // when the drag started and ended, respectively
         console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
@@ -59,7 +59,7 @@
         // by the reorder group
         event.detail.complete();
       };
-      return { handleReorder, pizza };
+      return { handleReorderEnd, pizza };
     },
   });
 </script>

diff --git a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_html.md b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_html.md
@@ -4,7 +4,7 @@
     <ion-list>
       <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
       <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
-      <ion-reorder-group [disabled]="false" (ionReorderEnd)="handleReorder($any($event))">
+      <ion-reorder-group [disabled]="false" (ionReorderEnd)="handleReorderEnd($any($event))">
         <ion-item>
           <ion-label> Item 1 </ion-label>
           <ion-reorder slot="end"></ion-reorder>

diff --git a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md
@@ -17,7 +17,7 @@ import {
   imports: [IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
-  handleReorder(event: ReorderEndCustomEvent) {
+  handleReorderEnd(event: ReorderEndCustomEvent) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
     console.log('Dragged from index', event.detail.from, 'to', event.detail.to);

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
@@ -13,7 +13,7 @@ import {
 import './main.css';
 
 function Example() {
-  function handleReorder(event: ReorderEndCustomEvent) {
+  function handleReorderEnd(event: ReorderEndCustomEvent) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
     console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
@@ -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} onIonReorderEnd={handleReorder}>
+          <IonReorderGroup disabled={false} onIonReorderEnd={handleReorderEnd}>
             <IonItem>
               <IonLabel>Item 1</IonLabel>
               <IonReorder slot="end"></IonReorder>

diff --git a/static/usage/v8/reorder/custom-scroll-target/vue.md b/static/usage/v8/reorder/custom-scroll-target/vue.md
@@ -4,7 +4,7 @@
     <div class="ion-content-scroll-host">
       <ion-list>
         <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
-        <ion-reorder-group :disabled="false" @ionReorderEnd="handleReorder($event)">
+        <ion-reorder-group :disabled="false" @ionReorderEnd="handleReorderEnd($event)">
           <ion-item>
             <ion-label> Item 1 </ion-label>
             <ion-reorder slot="end"></ion-reorder>
@@ -42,7 +42,7 @@
   export default defineComponent({
     components: { IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
     setup() {
-      const handleReorder = (event: ReorderEndCustomEvent) => {
+      const handleReorderEnd = (event: ReorderEndCustomEvent) => {
         // The `from` and `to` properties contain the index of the item
         // when the drag started and ended, respectively
         console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
@@ -53,7 +53,7 @@
         event.detail.complete();
       };
 
-      return { handleReorder };
+      return { handleReorderEnd };
     },
   });
 </script>

diff --git a/static/usage/v8/reorder/toggling-disabled/angular/example_component_html.md b/static/usage/v8/reorder/toggling-disabled/angular/example_component_html.md
@@ -1,7 +1,7 @@
 ```html
 <ion-list>
   <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
-  <ion-reorder-group [disabled]="isDisabled" (ionReorderEnd)="handleReorder($any($event))">
+  <ion-reorder-group [disabled]="isDisabled" (ionReorderEnd)="handleReorderEnd($any($event))">
     <ion-item>
       <ion-label> Item 1 </ion-label>
       <ion-reorder slot="end"></ion-reorder>

diff --git a/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md b/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md
@@ -19,7 +19,7 @@ import {
 export class ExampleComponent {
   public isDisabled = true;
 
-  handleReorder(event: ReorderEndCustomEvent) {
+  handleReorderEnd(event: ReorderEndCustomEvent) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
     console.log('Dragged from index', event.detail.from, 'to', event.detail.to);

diff --git a/static/usage/v8/reorder/toggling-disabled/react.md b/static/usage/v8/reorder/toggling-disabled/react.md
@@ -13,7 +13,7 @@ import {
 function Example() {
   const [isDisabled, setIsDisabled] = useState(true);
 
-  function handleReorder(event: ReorderEndCustomEvent) {
+  function handleReorderEnd(event: ReorderEndCustomEvent) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
     console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
@@ -31,7 +31,7 @@ function Example() {
   return (
     <>
       <IonList>
-        <IonReorderGroup disabled={isDisabled} onIonReorderEnd={handleReorder}>
+        <IonReorderGroup disabled={isDisabled} onIonReorderEnd={handleReorderEnd}>
           <IonItem>
             <IonLabel>Item 1</IonLabel>
             <IonReorder slot="end"></IonReorder>

diff --git a/static/usage/v8/reorder/toggling-disabled/vue.md b/static/usage/v8/reorder/toggling-disabled/vue.md
@@ -1,7 +1,7 @@
 ```html
 <template>
   <ion-list>
-    <ion-reorder-group :disabled="isDisabled" @ionReorderEnd="handleReorder($event)">
+    <ion-reorder-group :disabled="isDisabled" @ionReorderEnd="handleReorderEnd($event)">
       <ion-item>
         <ion-label> Item 1 </ion-label>
         <ion-reorder slot="end"></ion-reorder>
@@ -50,7 +50,7 @@
     setup() {
       let isDisabled = ref(true);
 
-      const handleReorder = (event: ReorderEndCustomEvent) => {
+      const handleReorderEnd = (event: ReorderEndCustomEvent) => {
         // The `from` and `to` properties contain the index of the item
         // when the drag started and ended, respectively
         console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
@@ -65,7 +65,7 @@
         isDisabled.value = !isDisabled.value;
       };
 
-      return { isDisabled, handleReorder, toggleReorder };
+      return { isDisabled, handleReorderEnd, toggleReorder };
     },
   });
 </script>

diff --git a/static/usage/v8/reorder/updating-data/angular/example_component_html.md b/static/usage/v8/reorder/updating-data/angular/example_component_html.md
@@ -2,7 +2,7 @@
 <ion-list>
   <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
   <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
-  <ion-reorder-group [disabled]="false" (ionReorderEnd)="handleReorder($any($event))">
+  <ion-reorder-group [disabled]="false" (ionReorderEnd)="handleReorderEnd($any($event))">
     @for (item of items; track item) {
     <ion-item>
       <ion-label> Item {{ item }} </ion-label>

diff --git a/static/usage/v8/reorder/updating-data/angular/example_component_ts.md b/static/usage/v8/reorder/updating-data/angular/example_component_ts.md
@@ -18,7 +18,7 @@ import {
 export class ExampleComponent {
   items = [1, 2, 3, 4, 5];
 
-  handleReorder(event: ReorderEndCustomEvent) {
+  handleReorderEnd(event: ReorderEndCustomEvent) {
     // Before complete is called with the items they will remain in the
     // order before the drag
     console.log('Before complete', this.items);

diff --git a/static/usage/v8/reorder/updating-data/react.md b/static/usage/v8/reorder/updating-data/react.md
@@ -5,7 +5,7 @@ import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCust
 function Example() {
   const [items, setItems] = useState([1, 2, 3, 4, 5]);
 
-  function handleReorder(event: ReorderEndCustomEvent) {
+  function handleReorderEnd(event: ReorderEndCustomEvent) {
     // Before complete is called with the items they will remain in the
     // order before the drag
     console.log('Before complete', items);
@@ -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} onIonReorderEnd={handleReorder}>
+      <IonReorderGroup disabled={false} onIonReorderEnd={handleReorderEnd}>
         {items.map((item) => (
           <IonItem key={item}>
             <IonLabel>Item {item}</IonLabel>

diff --git a/static/usage/v8/reorder/updating-data/vue.md b/static/usage/v8/reorder/updating-data/vue.md
@@ -2,7 +2,7 @@
 <template>
   <ion-list>
     <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
-    <ion-reorder-group :disabled="false" @ionReorderEnd="handleReorder($event)">
+    <ion-reorder-group :disabled="false" @ionReorderEnd="handleReorderEnd($event)">
       <ion-item v-for="item in items" :key="item">
         <ion-label> Item {{ item }} </ion-label>
         <ion-reorder slot="end"></ion-reorder>
@@ -20,7 +20,7 @@
     setup() {
       const items = ref([1, 2, 3, 4, 5]);
 
-      const handleReorder = (event: ReorderEndCustomEvent) => {
+      const handleReorderEnd = (event: ReorderEndCustomEvent) => {
         // Before complete is called with the items they will remain in the
         // order before the drag
         console.log('Before complete', items.value);
@@ -33,7 +33,7 @@
         // After complete is called the items will be in the new order
         console.log('After complete', items.value);
       };
-      return { handleReorder, items };
+      return { handleReorderEnd, items };
     },
   });
 </script>

diff --git a/static/usage/v8/reorder/wrapper/angular/example_component_html.md b/static/usage/v8/reorder/wrapper/angular/example_component_html.md
@@ -2,7 +2,7 @@
 <ion-list>
   <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
   <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
-  <ion-reorder-group [disabled]="false" (ionReorderEnd)="handleReorder($any($event))">
+  <ion-reorder-group [disabled]="false" (ionReorderEnd)="handleReorderEnd($any($event))">
     <ion-reorder>
       <ion-item>
         <ion-label> Item 1 </ion-label>

diff --git a/static/usage/v8/reorder/wrapper/angular/example_component_ts.md b/static/usage/v8/reorder/wrapper/angular/example_component_ts.md
@@ -16,7 +16,7 @@ import {
   imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
-  handleReorder(event: ReorderEndCustomEvent) {
+  handleReorderEnd(event: ReorderEndCustomEvent) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
     console.log('Dragged from index', event.detail.from, 'to', event.detail.to);

diff --git a/static/usage/v8/reorder/wrapper/react.md b/static/usage/v8/reorder/wrapper/react.md
@@ -3,7 +3,7 @@ import React from 'react';
 import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/react';
 
 function Example() {
-  function handleReorder(event: ReorderEndCustomEvent) {
+  function handleReorderEnd(event: ReorderEndCustomEvent) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
     console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
@@ -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} onIonReorderEnd={handleReorder}>
+      <IonReorderGroup disabled={false} onIonReorderEnd={handleReorderEnd}>
         <IonReorder>
           <IonItem>
             <IonLabel>Item 1</IonLabel>

diff --git a/static/usage/v8/reorder/wrapper/vue.md b/static/usage/v8/reorder/wrapper/vue.md
@@ -2,7 +2,7 @@
 <template>
   <ion-list>
     <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
-    <ion-reorder-group :disabled="false" @ionReorderEnd="handleReorder($event)">
+    <ion-reorder-group :disabled="false" @ionReorderEnd="handleReorderEnd($event)">
       <ion-reorder>
         <ion-item>
           <ion-label> Item 1 </ion-label>
@@ -43,7 +43,7 @@
   export default defineComponent({
     components: { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
     setup() {
-      const handleReorder = (event: ReorderEndCustomEvent) => {
+      const handleReorderEnd = (event: ReorderEndCustomEvent) => {
         // The `from` and `to` properties contain the index of the item
         // when the drag started and ended, respectively
         console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
@@ -54,7 +54,7 @@
         event.detail.complete();
       };
 
-      return { handleReorder };
+      return { handleReorderEnd };
     },
   });
 </script>