diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 584f49999d..f3fd4151cc 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -3520,7 +3520,7 @@ export namespace Components {
 
   interface IonReorderGroup {
     /**
-    * This method must be called once the `ionItemReorder` event is handled in order to complete the reorder operation.
+    * Completes the reorder operation. Must be called by the `ionItemReorder` event.  If a list of items is passed, the list will be reordered and returned in the proper order.  If no parameters are passed or if `true` is passed in, the reorder will complete and the item will remain in the position it was dragged to. If `false` is passed, the reorder will complete and the item will bounce back to its original position.
     */
     'complete': (listOrReorder?: boolean | any[] | undefined) => Promise<any>;
     /**
diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md
index 2920b496db..9f011715a6 100644
--- a/core/src/components/action-sheet/readme.md
+++ b/core/src/components/action-sheet/readme.md
@@ -186,7 +186,6 @@ export default class ActionSheetExample extends Component<Props, State> {
     );
   }
 }
-
 ```
 
 
diff --git a/core/src/components/action-sheet/usage/react.md b/core/src/components/action-sheet/usage/react.md
index f4643fdba6..6ac8d419c4 100644
--- a/core/src/components/action-sheet/usage/react.md
+++ b/core/src/components/action-sheet/usage/react.md
@@ -59,5 +59,4 @@ export default class ActionSheetExample extends Component<Props, State> {
     );
   }
 }
-
 ```
diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md
index ca8afe3668..ac70baca34 100644
--- a/core/src/components/alert/readme.md
+++ b/core/src/components/alert/readme.md
@@ -797,7 +797,6 @@ export default class AlertExample extends Component<Props, State> {
     );
   }
 }
-
 ```
 
 
diff --git a/core/src/components/alert/usage/react.md b/core/src/components/alert/usage/react.md
index 81baa70067..36377af781 100644
--- a/core/src/components/alert/usage/react.md
+++ b/core/src/components/alert/usage/react.md
@@ -267,5 +267,4 @@ export default class AlertExample extends Component<Props, State> {
     );
   }
 }
-
 ```
diff --git a/core/src/components/backdrop/readme.md b/core/src/components/backdrop/readme.md
index d444bc2f17..3042468459 100644
--- a/core/src/components/backdrop/readme.md
+++ b/core/src/components/backdrop/readme.md
@@ -135,7 +135,7 @@ export default Example;
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class Menu extends Vue {
+  export default class Example extends Vue {
     backdropDismiss = false;
     showBackdrop = false;
     shouldPropagate = false;
diff --git a/core/src/components/backdrop/usage/vue.md b/core/src/components/backdrop/usage/vue.md
index 36fd4237da..d2ea30800e 100644
--- a/core/src/components/backdrop/usage/vue.md
+++ b/core/src/components/backdrop/usage/vue.md
@@ -24,7 +24,7 @@
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class Menu extends Vue {
+  export default class Example extends Vue {
     backdropDismiss = false;
     showBackdrop = false;
     shouldPropagate = false;
diff --git a/core/src/components/checkbox/readme.md b/core/src/components/checkbox/readme.md
index 794d928f4e..963ff58a6a 100644
--- a/core/src/components/checkbox/readme.md
+++ b/core/src/components/checkbox/readme.md
@@ -174,7 +174,7 @@ export default CheckboxExample;
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class Menu extends Vue {
+  export default class Example extends Vue {
     form = [
       { val: 'Pepperoni', isChecked: true },
       { val: 'Sausage', isChecked: false },
diff --git a/core/src/components/checkbox/usage/vue.md b/core/src/components/checkbox/usage/vue.md
index 9cffcee32b..4465c8d655 100644
--- a/core/src/components/checkbox/usage/vue.md
+++ b/core/src/components/checkbox/usage/vue.md
@@ -29,7 +29,7 @@
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class Menu extends Vue {
+  export default class Example extends Vue {
     form = [
       { val: 'Pepperoni', isChecked: true },
       { val: 'Sausage', isChecked: false },
diff --git a/core/src/components/datetime/readme.md b/core/src/components/datetime/readme.md
index 72e34987ba..5debb76669 100644
--- a/core/src/components/datetime/readme.md
+++ b/core/src/components/datetime/readme.md
@@ -643,7 +643,7 @@ export default Example;
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class Menu extends Vue {
+  export default class Example extends Vue {
     customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
 
     customDayShortNames = [
diff --git a/core/src/components/datetime/usage/vue.md b/core/src/components/datetime/usage/vue.md
index 15ba19be5e..3734c00fc4 100644
--- a/core/src/components/datetime/usage/vue.md
+++ b/core/src/components/datetime/usage/vue.md
@@ -83,7 +83,7 @@
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class Menu extends Vue {
+  export default class Example extends Vue {
     customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
 
     customDayShortNames = [
diff --git a/core/src/components/infinite-scroll/readme.md b/core/src/components/infinite-scroll/readme.md
index 0bcbe6498f..89bfd4cdfb 100644
--- a/core/src/components/infinite-scroll/readme.md
+++ b/core/src/components/infinite-scroll/readme.md
@@ -74,7 +74,7 @@ export class InfiniteScrollExample {
 
 ```html
 <ion-content>
-  <ion-button onclick="toggleInfiniteScroll()" expand="block">
+  <ion-button onClick="toggleInfiniteScroll()" expand="block">
     Toggle Infinite Scroll
   </ion-button>
 
@@ -114,64 +114,57 @@ function toggleInfiniteScroll() {
 ### React
 
 ```tsx
-import React from 'react';
+import React, { Component } from 'react';
 
-import { IonAvatar } from '@ionic/react';
+import { IonButton, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonList } from '@ionic/react';
 
-const Example: React.SFC<{}> = () => (
+export default class Example extends Component<Props, State> {
 
-  <IonContent>
-    <IonButton onClick="toggleInfiniteScroll()" expand="block">
-      Toggle Infinite Scroll
-    </IonButton>
+  ionInfiniteScrollRef: React.RefObject<HTMLionInfiniteScrollElement>
 
-    <IonList></IonList>
-
-    <IonInfinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
-      <IonInfinite-scrollContent
-        loadingSpinner="bubbles"
-        loadingText="Loading more data...">
-      </IonInfinite-scrollContent>
-    </IonInfinite-scroll>
-  </IonContent>
-
-
-
-  import { Component, ViewChild } from '@angular/core';
-  import { IonInfiniteScroll } from '@ionic/angular';
-
-  @Component({
-    selector: 'infinite-scroll-example',
-    templateUrl: 'infinite-scroll-example.html',
-    styleUrls: ['./infinite-scroll-example.css']
-  })
-  export class InfiniteScrollExample {
-    @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
-
-    constructor() {}
-
-    loadData(event) {
-      setTimeout(() => {
-        console.log('Done');
-        event.target.complete();
-
-        // App logic to determine if all data is loaded
-        // and disable the infinite scroll
-        if (data.length == 1000) {
-          event.target.disabled = true;
-        }
-      }, 500);
-    }
-
-    toggleInfiniteScroll() {
-      this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
-    }
+  constructor() {
+    this.ionInfiniteScrollRef = React.createRef<HTMLionInfiniteScrollElement>();
   }
 
+  loadData = (ev: MouseEvent) => {
+    setTimeout(() => {
+      console.log('Done');
+      ev.target.complete();
 
-);
+      // App logic to determine if all data is loaded
+      // and disable the infinite scroll
+      if (data.length == 1000) {
+        ev.target.disabled = true;
+      }
+    }, 500);
+  }
 
-export default Example
+  toggleInfiniteScroll = () => {
+    this.ionInfiniteScrollRef.disabled = !this.ionInfiniteScrollRef.disabled;
+  }
+
+  render() {
+    return (
+      <>
+        <IonContent>
+          <IonButton onClick="toggleInfiniteScroll()" expand="block">
+            Toggle Infinite Scroll
+          </IonButton>
+
+          <IonList></IonList>
+
+          <IonInfiniteScroll threshold="100px" onIonInfinite={(ev) => this.loadData(ev)}>
+            <IonInfiniteScrollContent
+              loadingSpinner="bubbles"
+              loadingText="Loading more data...">
+            </IonInfiniteScrollContent>
+          </IonInfiniteScroll>
+        </IonContent>
+      </>
+    );
+  }
+}
+```
 
 
 
diff --git a/core/src/components/infinite-scroll/usage/javascript.md b/core/src/components/infinite-scroll/usage/javascript.md
index ff992a13fa..ba626aba7a 100644
--- a/core/src/components/infinite-scroll/usage/javascript.md
+++ b/core/src/components/infinite-scroll/usage/javascript.md
@@ -1,6 +1,6 @@
 ```html
 <ion-content>
-  <ion-button onclick="toggleInfiniteScroll()" expand="block">
+  <ion-button onClick="toggleInfiniteScroll()" expand="block">
     Toggle Infinite Scroll
   </ion-button>
 
diff --git a/core/src/components/infinite-scroll/usage/react.md b/core/src/components/infinite-scroll/usage/react.md
index d81ab0c062..836d2df07a 100644
--- a/core/src/components/infinite-scroll/usage/react.md
+++ b/core/src/components/infinite-scroll/usage/react.md
@@ -1,59 +1,52 @@
 ```tsx
-import React from 'react';
+import React, { Component } from 'react';
 
-import { IonAvatar } from '@ionic/react';
+import { IonButton, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonList } from '@ionic/react';
 
-const Example: React.SFC<{}> = () => (
+export default class Example extends Component<Props, State> {
 
-  <IonContent>
-    <IonButton onClick="toggleInfiniteScroll()" expand="block">
-      Toggle Infinite Scroll
-    </IonButton>
+  ionInfiniteScrollRef: React.RefObject<HTMLionInfiniteScrollElement>
 
-    <IonList></IonList>
-
-    <IonInfinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
-      <IonInfinite-scrollContent
-        loadingSpinner="bubbles"
-        loadingText="Loading more data...">
-      </IonInfinite-scrollContent>
-    </IonInfinite-scroll>
-  </IonContent>
-
-
-
-  import { Component, ViewChild } from '@angular/core';
-  import { IonInfiniteScroll } from '@ionic/angular';
-
-  @Component({
-    selector: 'infinite-scroll-example',
-    templateUrl: 'infinite-scroll-example.html',
-    styleUrls: ['./infinite-scroll-example.css']
-  })
-  export class InfiniteScrollExample {
-    @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
-
-    constructor() {}
-
-    loadData(event) {
-      setTimeout(() => {
-        console.log('Done');
-        event.target.complete();
-
-        // App logic to determine if all data is loaded
-        // and disable the infinite scroll
-        if (data.length == 1000) {
-          event.target.disabled = true;
-        }
-      }, 500);
-    }
-
-    toggleInfiniteScroll() {
-      this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
-    }
+  constructor() {
+    this.ionInfiniteScrollRef = React.createRef<HTMLionInfiniteScrollElement>();
   }
 
+  loadData = (ev: MouseEvent) => {
+    setTimeout(() => {
+      console.log('Done');
+      ev.target.complete();
 
-);
+      // App logic to determine if all data is loaded
+      // and disable the infinite scroll
+      if (data.length == 1000) {
+        ev.target.disabled = true;
+      }
+    }, 500);
+  }
 
-export default Example
+  toggleInfiniteScroll = () => {
+    this.ionInfiniteScrollRef.disabled = !this.ionInfiniteScrollRef.disabled;
+  }
+
+  render() {
+    return (
+      <>
+        <IonContent>
+          <IonButton onClick="toggleInfiniteScroll()" expand="block">
+            Toggle Infinite Scroll
+          </IonButton>
+
+          <IonList></IonList>
+
+          <IonInfiniteScroll threshold="100px" onIonInfinite={(ev) => this.loadData(ev)}>
+            <IonInfiniteScrollContent
+              loadingSpinner="bubbles"
+              loadingText="Loading more data...">
+            </IonInfiniteScrollContent>
+          </IonInfiniteScroll>
+        </IonContent>
+      </>
+    );
+  }
+}
+```
diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md
index 58ad5eb356..684922825b 100644
--- a/core/src/components/loading/readme.md
+++ b/core/src/components/loading/readme.md
@@ -138,7 +138,6 @@ export class LoadingExample extends Component<Props, State> {
     );
   }
 }
-
 ```
 
 
diff --git a/core/src/components/loading/usage/react.md b/core/src/components/loading/usage/react.md
index 5497631c52..94d2e7dd07 100644
--- a/core/src/components/loading/usage/react.md
+++ b/core/src/components/loading/usage/react.md
@@ -41,5 +41,4 @@ export class LoadingExample extends Component<Props, State> {
     );
   }
 }
-
 ```
diff --git a/core/src/components/menu/readme.md b/core/src/components/menu/readme.md
index fae53045e8..7d495c971c 100644
--- a/core/src/components/menu/readme.md
+++ b/core/src/components/menu/readme.md
@@ -337,7 +337,7 @@ export default Example;
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class MenuExample extends Vue {
+  export default class Example extends Vue {
 
     openFirst() {
       this.menu.enable(true, 'first');
diff --git a/core/src/components/menu/usage/vue.md b/core/src/components/menu/usage/vue.md
index c7c320064c..150839ee61 100644
--- a/core/src/components/menu/usage/vue.md
+++ b/core/src/components/menu/usage/vue.md
@@ -63,7 +63,7 @@
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class MenuExample extends Vue {
+  export default class Example extends Vue {
 
     openFirst() {
       this.menu.enable(true, 'first');
diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md
index 0d00a71d1f..12d991086c 100644
--- a/core/src/components/modal/readme.md
+++ b/core/src/components/modal/readme.md
@@ -204,7 +204,6 @@ export class ModalExample extends Component<Props, State> {
     );
   }
 }
-
 ```
 
 
diff --git a/core/src/components/modal/usage/react.md b/core/src/components/modal/usage/react.md
index bca49bf5bc..9b95e685be 100644
--- a/core/src/components/modal/usage/react.md
+++ b/core/src/components/modal/usage/react.md
@@ -30,5 +30,4 @@ export class ModalExample extends Component<Props, State> {
     );
   }
 }
-
 ```
diff --git a/core/src/components/popover/readme.md b/core/src/components/popover/readme.md
index 13cecb1fcb..b95afa374c 100644
--- a/core/src/components/popover/readme.md
+++ b/core/src/components/popover/readme.md
@@ -91,7 +91,6 @@ export class PopoverExample extends Component<Props, State> {
     );
   }
 }
-
 ```
 
 
diff --git a/core/src/components/popover/usage/react.md b/core/src/components/popover/usage/react.md
index f8bcdf692e..9424458198 100644
--- a/core/src/components/popover/usage/react.md
+++ b/core/src/components/popover/usage/react.md
@@ -27,5 +27,4 @@ export class PopoverExample extends Component<Props, State> {
     );
   }
 }
-
 ```
diff --git a/core/src/components/refresher/readme.md b/core/src/components/refresher/readme.md
index cc47aae26e..8255390fd1 100644
--- a/core/src/components/refresher/readme.md
+++ b/core/src/components/refresher/readme.md
@@ -122,10 +122,7 @@ const Example: React.SFC<{}> = () => (
       </IonRefresher>
     </IonContent>
   </>
-
   }
-
-
 );
 
 export default Example
@@ -154,11 +151,12 @@ export default Example
     </ion-refresher>
   </ion-content>
 </template>
+
 <script lang="ts">
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class Menu extends Vue {
+  export default class Example extends Vue {
 
     doRefresh(event) {
       console.log('Begin async operation');
diff --git a/core/src/components/refresher/usage/react.md b/core/src/components/refresher/usage/react.md
index e8bd3308b7..1841d6442b 100644
--- a/core/src/components/refresher/usage/react.md
+++ b/core/src/components/refresher/usage/react.md
@@ -33,10 +33,7 @@ const Example: React.SFC<{}> = () => (
       </IonRefresher>
     </IonContent>
   </>
-
   }
-
-
 );
 
 export default Example
diff --git a/core/src/components/refresher/usage/vue.md b/core/src/components/refresher/usage/vue.md
index cdb38520f1..593bc4b511 100644
--- a/core/src/components/refresher/usage/vue.md
+++ b/core/src/components/refresher/usage/vue.md
@@ -19,11 +19,12 @@
     </ion-refresher>
   </ion-content>
 </template>
+
 <script lang="ts">
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class Menu extends Vue {
+  export default class Example extends Vue {
 
     doRefresh(event) {
       console.log('Begin async operation');
diff --git a/core/src/components/reorder-group/readme.md b/core/src/components/reorder-group/readme.md
index 1fd54c1302..256d617af7 100644
--- a/core/src/components/reorder-group/readme.md
+++ b/core/src/components/reorder-group/readme.md
@@ -1,46 +1,11 @@
 # ion-reorder-group
 
-The reorder group is a wrapper component for items with the `ion-reorder` component, Check [Reorder documentation](../reorder/) for further information about the anchor component that is used to drag items within the `ion-reorder-group` list.
+The reorder group is a wrapper component for items using the `ion-reorder` component. See the [Reorder documentation](../reorder/) for further information about the anchor component that is used to drag items within the `ion-reorder-group`.
 
-Once the user drags an item and drops it in a new position, the `ionItemReorder` event is dispatched. A handler for it must be implemented by the developer to commit changes.
+Once the user drags an item and drops it in a new position, the `ionItemReorder` event is dispatched. A handler for it should be implemented that calls the `complete()` method.
 
-```js
-reorderGroup.addEventListener('ionItemReorder', (ev) => {
-  console.log(`Moving item from ${ev.detail.from} to ${ev.detail.to}`);
+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.
 
-  this.dataList = reorderArray(this.dataList, ev.detail.from, ev.detail.to);
-  ev.detail.complete();
-});
-```
-
-The event's detail includes all the relevant information about the reorder operation, including the `from` and `to` indexes. In the context of reordering, an item moves `from` index X `to` index Y.
-
-For example, in this list we move the item at index `0` to the index `3`:
-
-```
-BEFORE | AFTER
-  0    |   1
-  1    |   2
-  2    |   3
-  3    |   0
-  4    |   4
-```
-
-```
-detail: {
-  from: 0
-  to: 3
-}
-```
-
-Once the data structure has been updated to reflect the reorder change, the `complete()` method must be called.
-This method finishes the reorder operation and resets all the CSS transforms applied by the `ion-reorder-group` component.
-
-Fortunately this `complete()` method can optionally accept an array as input and it will return a reordered copy, based in `detail.from` and `detail.to`.
-
-```ts
-this.dataList = reorderGroup.complete(this.dataList);
-```
 
 <!-- Auto Generated Below -->
 
@@ -50,116 +15,248 @@ this.dataList = reorderGroup.complete(this.dataList);
 ### Angular
 
 ```html
-<ion-content>
-  <ion-list>
-    <ion-reorder-group>
+<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+<ion-reorder-group (ionItemReorder)="doReorder($event)" disabled="false">
+  <!-- Default reorder icon, end aligned items -->
+  <ion-item>
+    <ion-label>
+      Item 1
+    </ion-label>
+    <ion-reorder slot="end"></ion-reorder>
+  </ion-item>
 
-      <ion-item>
-        <ion-label>
-          Item 1
-        </ion-label>
-        <ion-reorder slot="end"></ion-reorder>
-      </ion-item>
+  <ion-item>
+    <ion-label>
+      Item 2
+    </ion-label>
+    <ion-reorder slot="end"></ion-reorder>
+  </ion-item>
 
-      <ion-item>
-        <ion-label>
-          Item 2 (default ion-reorder slot="start")
-        </ion-label>
-        <ion-reorder slot="start"></ion-reorder>
-      </ion-item>
+  <!-- Default reorder icon, start aligned items -->
+  <ion-item>
+    <ion-reorder slot="start"></ion-reorder>
+    <ion-label>
+      Item 3
+    </ion-label>
+  </ion-item>
 
-      <ion-item>
-        <ion-label>
-          Item 3 (custom ion-reorder)
-        </ion-label>
-        <ion-reorder slot="end">
-          <ion-icon name="pizza"></ion-icon>
-        </ion-reorder>
-      </ion-item>
+  <ion-item>
+    <ion-reorder slot="start"></ion-reorder>
+    <ion-label>
+      Item 4
+    </ion-label>
+  </ion-item>
 
-      <ion-item>
-        <ion-label>
-          Item 4 (custom ion-reorder slot="start")
-        </ion-label>
-        <ion-reorder slot="start">
-          <ion-icon name="pizza"></ion-icon>
-        </ion-reorder>
-      </ion-item>
+  <!-- Custom reorder icon end items -->
+  <ion-item>
+    <ion-label>
+      Item 5
+    </ion-label>
+    <ion-reorder slot="end">
+      <ion-icon name="pizza"></ion-icon>
+    </ion-reorder>
+  </ion-item>
 
-      <ion-reorder>
-        <ion-item>
-          <ion-label>
-            Item 5 (the whole item can be dragged)
-          </ion-label>
-          </ion-item>
-      </ion-reorder>
+  <ion-item>
+    <ion-label>
+      Item 6
+    </ion-label>
+    <ion-reorder slot="end">
+      <ion-icon name="pizza"></ion-icon>
+    </ion-reorder>
+  </ion-item>
 
-    </ion-reorder-group>
-  </ion-list>
-</ion-content>
+  <!-- Items wrapped in a reorder, entire item can be dragged -->
+  <ion-reorder>
+    <ion-item>
+      <ion-label>
+        Item 7
+      </ion-label>
+    </ion-item>
+  </ion-reorder>
+
+  <ion-reorder>
+    <ion-item>
+      <ion-label>
+        Item 8
+      </ion-label>
+    </ion-item>
+  </ion-reorder>
+</ion-reorder-group>
+```
+
+```javascript
+import { Component, ViewChild } from '@angular/core';
+import { IonReorderGroup } from '@ionic/angular';
+
+@Component({
+  selector: 'reorder-group-example',
+  templateUrl: 'reorder-group-example.html',
+  styleUrls: ['./reorder-group-example.css']
+})
+export class ReorderGroupExample {
+  @ViewChild(IonReorderGroup) reorderGroup: IonReorderGroup;
+
+  constructor() {}
+
+  doReorder(ev: any) => {
+    // The `from` and `to` properties contain the index of the item
+    // when the drag started and ended, respectively
+    console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. This method can also be called directly
+    // by the reorder group
+    ev.detail.complete();
+  });
+
+  toggleReorderGroup() {
+    this.reorderGroup.disabled = !this.reorderGroup.disabled;
+  }
+}
+```
+
+#### Updating Data
+
+```javascript
+import { Component, ViewChild } from '@angular/core';
+import { IonReorderGroup } from '@ionic/angular';
+
+@Component({
+  selector: 'reorder-group-example',
+  templateUrl: 'reorder-group-example.html',
+  styleUrls: ['./reorder-group-example.css']
+})
+export class ReorderGroupExample {
+  items = [1, 2, 3, 4, 5];
+
+  @ViewChild(IonReorderGroup) reorderGroup: IonReorderGroup;
+
+  constructor() {}
+
+  doReorder(ev: any) => {
+    // Before complete is called with the items they will remain in the
+    // order before the drag
+    console.log('Before complete', this.items);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. Update the items variable to the
+    // new order of items
+    this.items = ev.detail.complete(this.items);
+
+    // After complete is called the items will be in the new order
+    console.log('After complete', this.items);
+  });
+}
 ```
 
 
 ### Javascript
 
 ```html
-<ion-content>
-  <ion-list>
-    <ion-reorder-group disabled="false">
+<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+<ion-reorder-group disabled="false">
+  <!-- Default reorder icon, end aligned items -->
+  <ion-item>
+    <ion-label>
+      Item 1
+    </ion-label>
+    <ion-reorder slot="end"></ion-reorder>
+  </ion-item>
 
-      <ion-item>
-        <ion-label>
-          Item 1
-        </ion-label>
-        <ion-reorder slot="end"></ion-reorder>
-      </ion-item>
+  <ion-item>
+    <ion-label>
+      Item 2
+    </ion-label>
+    <ion-reorder slot="end"></ion-reorder>
+  </ion-item>
 
-      <ion-item>
-        <ion-label>
-          Item 2 (default ion-reorder slot="start")
-        </ion-label>
-        <ion-reorder slot="start"></ion-reorder>
-      </ion-item>
+  <!-- Default reorder icon, start aligned items -->
+  <ion-item>
+    <ion-reorder slot="start"></ion-reorder>
+    <ion-label>
+      Item 3
+    </ion-label>
+  </ion-item>
 
-      <ion-item>
-        <ion-label>
-          Item 3 (custom ion-reorder)
-        </ion-label>
-        <ion-reorder slot="end">
-          <ion-icon name="pizza"></ion-icon>
-        </ion-reorder>
-      </ion-item>
+  <ion-item>
+    <ion-reorder slot="start"></ion-reorder>
+    <ion-label>
+      Item 4
+    </ion-label>
+  </ion-item>
 
-      <ion-item>
-        <ion-label>
-          Item 4 (custom ion-reorder slot="start")
-        </ion-label>
-        <ion-reorder slot="start">
-          <ion-icon name="pizza"></ion-icon>
-        </ion-reorder>
-      </ion-item>
+  <!-- Custom reorder icon end items -->
+  <ion-item>
+    <ion-label>
+      Item 5
+    </ion-label>
+    <ion-reorder slot="end">
+      <ion-icon name="pizza"></ion-icon>
+    </ion-reorder>
+  </ion-item>
 
-      <ion-reorder>
-        <ion-item>
-          <ion-label>
-            Item 5 (the whole item can be dragged)
-          </ion-label>
-          </ion-item>
-      </ion-reorder>
+  <ion-item>
+    <ion-label>
+      Item 6
+    </ion-label>
+    <ion-reorder slot="end">
+      <ion-icon name="pizza"></ion-icon>
+    </ion-reorder>
+  </ion-item>
 
-    </ion-reorder-group>
-  </ion-list>
-</ion-content>
+  <!-- Items wrapped in a reorder, entire item can be dragged -->
+  <ion-reorder>
+    <ion-item>
+      <ion-label>
+        Item 7
+      </ion-label>
+    </ion-item>
+  </ion-reorder>
+
+  <ion-reorder>
+    <ion-item>
+      <ion-label>
+        Item 8
+      </ion-label>
+    </ion-item>
+  </ion-reorder>
+</ion-reorder-group>
 ```
 
 ```javascript
 const reorderGroup = document.querySelector('ion-reorder-group');
-reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
-  // finishing the reorder, true means ion-reorder-group with reorder the DOM
-  detail.complete(true);
 
-  // or:
-  // reorderGroup.complete(true)
+reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
+  // The `from` and `to` properties contain the index of the item
+  // when the drag started and ended, respectively
+  console.log('Dragged from index', detail.from, 'to', detail.to);
+
+  // Finish the reorder and position the item in the DOM based on
+  // where the gesture ended. This method can also be called directly
+  // by the reorder group
+  detail.complete();
+});
+```
+
+#### Updating Data
+
+```javascript
+const items = [1, 2, 3, 4, 5];
+const reorderGroup = document.querySelector('ion-reorder-group');
+
+reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
+  // Before complete is called with the items they will remain in the
+  // order before the drag
+  console.log('Before complete', items);
+
+  // Finish the reorder and position the item in the DOM based on
+  // where the gesture ended. Update the items variable to the
+  // new order of items
+  items = detail.complete(items);
+
+  // After complete is called the items will be in the new order
+  console.log('After complete', items);
 });
 ```
 
@@ -169,114 +266,236 @@ reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
 ```tsx
 import React from 'react';
 
-import { IonContent, IonList, IonItem, IonLabel, IonReorder, IonReorderGroup, IonIcon } from '@ionic/react';
+import { IonItem, IonLabel, IonReorder, IonReorderGroup, IonIcon } from '@ionic/react';
+
+function doReorder(event: CustomEvent) {
+  // 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);
+
+  // Finish the reorder and position the item in the DOM based on
+  // where the gesture ended. This method can also be called directly
+  // by the reorder group
+  event.detail.complete();
+}
 
 const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- The reorder gesture is disabled by default, enable it to drag and drop items --*/}
+    <IonReorderGroup disabled={false} onIonItemReorder={doReorder}>
+      {/*-- Default reorder icon, end aligned items --*/}
+      <IonItem>
+        <IonLabel>
+          Item 1
+        </IonLabel>
+        <IonReorder slot="end"></IonReorder>
+      </IonItem>
 
-  <IonContent>
-    <IonList>
-      <IonReorderGroup>
+      <IonItem>
+        <IonLabel>
+          Item 2
+        </IonLabel>
+        <IonReorder slot="end"></IonReorder>
+      </IonItem>
 
-        <IonItem>
-          <IonLabel>
-            Item 1
-          </IonLabel>
-          <IonReorder slot="end"></IonReorder>
-        </IonItem>
+      {/*-- Default reorder icon, start aligned items --*/}
+      <IonItem>
+        <IonReorder slot="start"></IonReorder>
+        <IonLabel>
+          Item 3
+        </IonLabel>
+      </IonItem>
 
-        <IonItem>
-          <IonLabel>
-            Item 2 (default ion-reorder slot="start")
-          </IonLabel>
-          <IonReorder slot="start"></IonReorder>
-        </IonItem>
+      <IonItem>
+        <IonReorder slot="start"></IonReorder>
+        <IonLabel>
+          Item 4
+        </IonLabel>
+      </IonItem>
 
-        <IonItem>
-          <IonLabel>
-            Item 3 (custom ion-reorder)
-          </IonLabel>
-          <IonReorder slot="end">
-            <IonIcon name="pizza" />
-          </IonReorder>
-        </IonItem>
-
-        <IonItem>
-          <IonLabel>
-            Item 4 (custom ion-reorder slot="start")
-          </IonLabel>
-          <IonReorder slot="start">
-            <IonIcon name="pizza" />
-          </IonReorder>
-        </IonItem>
-
-        <IonReorder>
-          <IonItem>
-            <IonLabel>
-              Item 5 (the whole item can be dragged)
-            </IonLabel>
-            </IonItem>
+      {/*-- Custom reorder icon end items --*/}
+      <IonItem>
+        <IonLabel>
+          Item 5
+        </IonLabel>
+        <IonReorder slot="end">
+          <IonIcon name="pizza"></IonIcon>
         </IonReorder>
+      </IonItem>
 
-      </IonReorderGroup>
-    </IonList>
-  </IonContent>
+      <IonItem>
+        <IonLabel>
+          Item 6
+        </IonLabel>
+        <IonReorder slot="end">
+          <IonIcon name="pizza"></IonIcon>
+        </IonReorder>
+      </IonItem>
+
+      {/*-- Items wrapped in a reorder, entire item can be dragged --*/}
+      <IonReorder>
+        <IonItem>
+          <IonLabel>
+            Item 7
+          </IonLabel>
+        </IonItem>
+      </IonReorder>
+
+      <IonReorder>
+        <IonItem>
+          <IonLabel>
+            Item 8
+          </IonLabel>
+        </IonItem>
+      </IonReorder>
+    </IonReorderGroup>
+  </>
+  }
 );
 
 export default Example
+```
+
+#### Updating Data
+
+```tsx
+const items = [1, 2, 3, 4, 5];
+
+function doReorder(event: CustomEvent) {
+  // Before complete is called with the items they will remain in the
+  // order before the drag
+  console.log('Before complete', this.items);
+
+  // Finish the reorder and position the item in the DOM based on
+  // where the gesture ended. Update the items variable to the
+  // new order of items
+  this.items = event.detail.complete(this.items);
+
+  // After complete is called the items will be in the new order
+  console.log('After complete', this.items);
+}
+```
 
 
 ### Vue
 
 ```html
 <template>
-  <ion-content>
-    <ion-list>
-      <ion-reorder-group>
+  <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+  <ion-reorder-group @ionItemReorder="doReorder($event)" disabled="false">
+    <!-- Default reorder icon, end aligned items -->
+    <ion-item>
+      <ion-label>
+        Item 1
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
 
-        <ion-item>
-          <ion-label>
-            Item 1
-          </ion-label>
-          <ion-reorder slot="end"></ion-reorder>
-        </ion-item>
+    <ion-item>
+      <ion-label>
+        Item 2
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
 
-        <ion-item>
-          <ion-label>
-            Item 2 (default ion-reorder slot="start")
-          </ion-label>
-          <ion-reorder slot="start"></ion-reorder>
-        </ion-item>
+    <!-- Default reorder icon, start aligned items -->
+    <ion-item>
+      <ion-reorder slot="start"></ion-reorder>
+      <ion-label>
+        Item 3
+      </ion-label>
+    </ion-item>
 
-        <ion-item>
-          <ion-label>
-            Item 3 (custom ion-reorder)
-          </ion-label>
-          <ion-reorder slot="end">
-            <ion-icon name="pizza"></ion-icon>
-          </ion-reorder>
-        </ion-item>
+    <ion-item>
+      <ion-reorder slot="start"></ion-reorder>
+      <ion-label>
+        Item 4
+      </ion-label>
+    </ion-item>
 
-        <ion-item>
-          <ion-label>
-            Item 4 (custom ion-reorder slot="start")
-          </ion-label>
-          <ion-reorder slot="start">
-            <ion-icon name="pizza"></ion-icon>
-          </ion-reorder>
-        </ion-item>
+    <!-- Custom reorder icon end items -->
+    <ion-item>
+      <ion-label>
+        Item 5
+      </ion-label>
+      <ion-reorder slot="end">
+        <ion-icon name="pizza"></ion-icon>
+      </ion-reorder>
+    </ion-item>
 
-        <ion-reorder>
-          <ion-item>
-            <ion-label>
-              Item 5 (the whole item can be dragged)
-            </ion-label>
-            </ion-item>
-        </ion-reorder>
+    <ion-item>
+      <ion-label>
+        Item 6
+      </ion-label>
+      <ion-reorder slot="end">
+        <ion-icon name="pizza"></ion-icon>
+      </ion-reorder>
+    </ion-item>
 
-      </ion-reorder-group>
-    </ion-list>
-  </ion-content>
+    <!-- Items wrapped in a reorder, entire item can be dragged -->
+    <ion-reorder>
+      <ion-item>
+        <ion-label>
+          Item 7
+        </ion-label>
+      </ion-item>
+    </ion-reorder>
+
+    <ion-reorder>
+      <ion-item>
+        <ion-label>
+          Item 8
+        </ion-label>
+      </ion-item>
+    </ion-reorder>
+  </ion-reorder-group>
 </template>
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component()
+  export default class Example extends Vue {
+
+    doReorder(event) {
+      // 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);
+
+      // Finish the reorder and position the item in the DOM based on
+      // where the gesture ended. This method can also be called directly
+      // by the reorder group
+      event.detail.complete();
+    }
+  }
+</script>
+```
+
+#### Updating Data
+
+```html
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component()
+  export default class Example extends Vue {
+    items = [1, 2, 3, 4, 5];
+
+    doReorder(event) {
+      // Before complete is called with the items they will remain in the
+      // order before the drag
+      console.log('Before complete', this.items);
+
+      // Finish the reorder and position the item in the DOM based on
+      // where the gesture ended. Update the items variable to the
+      // new order of items
+      this.items = event.detail.complete(this.items);
+
+      // After complete is called the items will be in the new order
+      console.log('After complete', this.items);
+    }
+  }
+</script>
 ```
 
 
@@ -299,14 +518,20 @@ export default Example
 
 ### `complete(listOrReorder?: boolean | any[] | undefined) => Promise<any>`
 
-This method must be called once the `ionItemReorder` event is handled in order
-to complete the reorder operation.
+Completes the reorder operation. Must be called by the `ionItemReorder` event.
+
+If a list of items is passed, the list will be reordered and returned in the
+proper order.
+
+If no parameters are passed or if `true` is passed in, the reorder will complete
+and the item will remain in the position it was dragged to. If `false` is passed,
+the reorder will complete and the item will bounce back to its original position.
 
 #### Parameters
 
-| Name            | Type                            | Description |
-| --------------- | ------------------------------- | ----------- |
-| `listOrReorder` | `any[] \| boolean \| undefined` |             |
+| Name            | Type                            | Description                                                                                                                       |
+| --------------- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| `listOrReorder` | `any[] \| boolean \| undefined` | A list of items to be sorted and returned in the new order or a boolean of whether or not the reorder should reposition the item. |
 
 #### Returns
 
diff --git a/core/src/components/reorder-group/reorder-group.tsx b/core/src/components/reorder-group/reorder-group.tsx
index 905781fa8f..628578b244 100644
--- a/core/src/components/reorder-group/reorder-group.tsx
+++ b/core/src/components/reorder-group/reorder-group.tsx
@@ -90,8 +90,17 @@ export class ReorderGroup implements ComponentInterface {
   }
 
   /**
-   * This method must be called once the `ionItemReorder` event is handled in order
-   * to complete the reorder operation.
+   * Completes the reorder operation. Must be called by the `ionItemReorder` event.
+   *
+   * If a list of items is passed, the list will be reordered and returned in the
+   * proper order.
+   *
+   * If no parameters are passed or if `true` is passed in, the reorder will complete
+   * and the item will remain in the position it was dragged to. If `false` is passed,
+   * the reorder will complete and the item will bounce back to its original position.
+   *
+   * @param listOrReorder A list of items to be sorted and returned in the new order or a
+   * boolean of whether or not the reorder should reposition the item.
    */
   @Method()
   complete(listOrReorder?: boolean | any[]): Promise<any> {
@@ -219,7 +228,7 @@ export class ReorderGroup implements ComponentInterface {
       const toIndex = this.lastToIndex;
       const fromIndex = indexForItem(selectedItemEl);
 
-      if (listOrReorder === true) {
+      if (!listOrReorder || listOrReorder === true) {
         const ref = (fromIndex < toIndex)
           ? children[toIndex + 1]
           : children[toIndex];
diff --git a/core/src/components/reorder-group/test/basic/index.html b/core/src/components/reorder-group/test/basic/index.html
index 98571ec95f..fcc74f4a87 100644
--- a/core/src/components/reorder-group/test/basic/index.html
+++ b/core/src/components/reorder-group/test/basic/index.html
@@ -26,7 +26,6 @@
     <ion-content id="content">
       <ion-list>
         <ion-reorder-group id="reorder">
-
           <ion-item button onclick="openAlert()">
             <ion-label>
               Item 1 (default ion-reorder)
@@ -126,11 +125,15 @@
     function openAlert() {
       alert('click');
     }
+
     function toggleEdit() {
       const reorderGroup = document.getElementById('reorder');
       reorderGroup.disabled = !reorderGroup.disabled;
+
       reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
-        detail.complete(true);
+        console.log('Dragged from index', detail.from, 'to', detail.to);
+
+        detail.complete();
       });
     }
   </script>
diff --git a/core/src/components/reorder-group/test/data/index.html b/core/src/components/reorder-group/test/data/index.html
new file mode 100644
index 0000000000..1484dd0290
--- /dev/null
+++ b/core/src/components/reorder-group/test/data/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Reorder - Data</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../scripts/testing/scripts.js"></script>
+  <script src="../../../../../dist/ionic.js"></script>
+</head>
+
+<body onLoad="render()">
+  <ion-app>
+
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Reorder - Data</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content id="content">
+      <ion-list>
+        <ion-reorder-group id="reorderGroup" disabled="false">
+          <!-- items will be inserted here -->
+        </ion-reorder-group>
+      </ion-list>
+    </ion-content>
+
+  </ion-app>
+
+  <script>
+    let items = [];
+    for (var i = 0; i < 30; i++) {
+      items.push(i + 1);
+    }
+    const reorderGroup = document.getElementById('reorderGroup');
+
+    function render() {
+      let html = '';
+      for(let item of items) {
+        html += `
+          <ion-item>
+            <ion-label>${item}</ion-label>
+            <ion-reorder slot="end"></ion-reorder>
+          </ion-item>`;
+      }
+      reorderGroup.innerHTML = html;
+    }
+
+    reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
+      console.log('Dragged from index', detail.from, 'to', detail.to);
+
+      console.log('Before complete', items);
+      items = detail.complete(items);
+      console.log('After complete', items);
+    });
+  </script>
+</body>
+
+</html>
diff --git a/core/src/components/reorder-group/usage/angular.md b/core/src/components/reorder-group/usage/angular.md
index 2b5304a755..de82bd6576 100644
--- a/core/src/components/reorder-group/usage/angular.md
+++ b/core/src/components/reorder-group/usage/angular.md
@@ -1,49 +1,135 @@
 ```html
-<ion-content>
-  <ion-list>
-    <ion-reorder-group>
+<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+<ion-reorder-group (ionItemReorder)="doReorder($event)" disabled="false">
+  <!-- Default reorder icon, end aligned items -->
+  <ion-item>
+    <ion-label>
+      Item 1
+    </ion-label>
+    <ion-reorder slot="end"></ion-reorder>
+  </ion-item>
 
-      <ion-item>
-        <ion-label>
-          Item 1
-        </ion-label>
-        <ion-reorder slot="end"></ion-reorder>
-      </ion-item>
+  <ion-item>
+    <ion-label>
+      Item 2
+    </ion-label>
+    <ion-reorder slot="end"></ion-reorder>
+  </ion-item>
 
-      <ion-item>
-        <ion-label>
-          Item 2 (default ion-reorder slot="start")
-        </ion-label>
-        <ion-reorder slot="start"></ion-reorder>
-      </ion-item>
+  <!-- Default reorder icon, start aligned items -->
+  <ion-item>
+    <ion-reorder slot="start"></ion-reorder>
+    <ion-label>
+      Item 3
+    </ion-label>
+  </ion-item>
 
-      <ion-item>
-        <ion-label>
-          Item 3 (custom ion-reorder)
-        </ion-label>
-        <ion-reorder slot="end">
-          <ion-icon name="pizza"></ion-icon>
-        </ion-reorder>
-      </ion-item>
+  <ion-item>
+    <ion-reorder slot="start"></ion-reorder>
+    <ion-label>
+      Item 4
+    </ion-label>
+  </ion-item>
 
-      <ion-item>
-        <ion-label>
-          Item 4 (custom ion-reorder slot="start")
-        </ion-label>
-        <ion-reorder slot="start">
-          <ion-icon name="pizza"></ion-icon>
-        </ion-reorder>
-      </ion-item>
+  <!-- Custom reorder icon end items -->
+  <ion-item>
+    <ion-label>
+      Item 5
+    </ion-label>
+    <ion-reorder slot="end">
+      <ion-icon name="pizza"></ion-icon>
+    </ion-reorder>
+  </ion-item>
 
-      <ion-reorder>
-        <ion-item>
-          <ion-label>
-            Item 5 (the whole item can be dragged)
-          </ion-label>
-          </ion-item>
-      </ion-reorder>
+  <ion-item>
+    <ion-label>
+      Item 6
+    </ion-label>
+    <ion-reorder slot="end">
+      <ion-icon name="pizza"></ion-icon>
+    </ion-reorder>
+  </ion-item>
 
-    </ion-reorder-group>
-  </ion-list>
-</ion-content>
+  <!-- Items wrapped in a reorder, entire item can be dragged -->
+  <ion-reorder>
+    <ion-item>
+      <ion-label>
+        Item 7
+      </ion-label>
+    </ion-item>
+  </ion-reorder>
+
+  <ion-reorder>
+    <ion-item>
+      <ion-label>
+        Item 8
+      </ion-label>
+    </ion-item>
+  </ion-reorder>
+</ion-reorder-group>
+```
+
+```javascript
+import { Component, ViewChild } from '@angular/core';
+import { IonReorderGroup } from '@ionic/angular';
+
+@Component({
+  selector: 'reorder-group-example',
+  templateUrl: 'reorder-group-example.html',
+  styleUrls: ['./reorder-group-example.css']
+})
+export class ReorderGroupExample {
+  @ViewChild(IonReorderGroup) reorderGroup: IonReorderGroup;
+
+  constructor() {}
+
+  doReorder(ev: any) => {
+    // The `from` and `to` properties contain the index of the item
+    // when the drag started and ended, respectively
+    console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. This method can also be called directly
+    // by the reorder group
+    ev.detail.complete();
+  });
+
+  toggleReorderGroup() {
+    this.reorderGroup.disabled = !this.reorderGroup.disabled;
+  }
+}
+```
+
+#### Updating Data
+
+```javascript
+import { Component, ViewChild } from '@angular/core';
+import { IonReorderGroup } from '@ionic/angular';
+
+@Component({
+  selector: 'reorder-group-example',
+  templateUrl: 'reorder-group-example.html',
+  styleUrls: ['./reorder-group-example.css']
+})
+export class ReorderGroupExample {
+  items = [1, 2, 3, 4, 5];
+
+  @ViewChild(IonReorderGroup) reorderGroup: IonReorderGroup;
+
+  constructor() {}
+
+  doReorder(ev: any) => {
+    // Before complete is called with the items they will remain in the
+    // order before the drag
+    console.log('Before complete', this.items);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. Update the items variable to the
+    // new order of items
+    this.items = ev.detail.complete(this.items);
+
+    // After complete is called the items will be in the new order
+    console.log('After complete', this.items);
+  });
+}
 ```
diff --git a/core/src/components/reorder-group/usage/javascript.md b/core/src/components/reorder-group/usage/javascript.md
index 7056fb390a..a51fe347dd 100644
--- a/core/src/components/reorder-group/usage/javascript.md
+++ b/core/src/components/reorder-group/usage/javascript.md
@@ -1,60 +1,106 @@
 ```html
-<ion-content>
-  <ion-list>
-    <ion-reorder-group disabled="false">
+<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+<ion-reorder-group disabled="false">
+  <!-- Default reorder icon, end aligned items -->
+  <ion-item>
+    <ion-label>
+      Item 1
+    </ion-label>
+    <ion-reorder slot="end"></ion-reorder>
+  </ion-item>
 
-      <ion-item>
-        <ion-label>
-          Item 1
-        </ion-label>
-        <ion-reorder slot="end"></ion-reorder>
-      </ion-item>
+  <ion-item>
+    <ion-label>
+      Item 2
+    </ion-label>
+    <ion-reorder slot="end"></ion-reorder>
+  </ion-item>
 
-      <ion-item>
-        <ion-label>
-          Item 2 (default ion-reorder slot="start")
-        </ion-label>
-        <ion-reorder slot="start"></ion-reorder>
-      </ion-item>
+  <!-- Default reorder icon, start aligned items -->
+  <ion-item>
+    <ion-reorder slot="start"></ion-reorder>
+    <ion-label>
+      Item 3
+    </ion-label>
+  </ion-item>
 
-      <ion-item>
-        <ion-label>
-          Item 3 (custom ion-reorder)
-        </ion-label>
-        <ion-reorder slot="end">
-          <ion-icon name="pizza"></ion-icon>
-        </ion-reorder>
-      </ion-item>
+  <ion-item>
+    <ion-reorder slot="start"></ion-reorder>
+    <ion-label>
+      Item 4
+    </ion-label>
+  </ion-item>
 
-      <ion-item>
-        <ion-label>
-          Item 4 (custom ion-reorder slot="start")
-        </ion-label>
-        <ion-reorder slot="start">
-          <ion-icon name="pizza"></ion-icon>
-        </ion-reorder>
-      </ion-item>
+  <!-- Custom reorder icon end items -->
+  <ion-item>
+    <ion-label>
+      Item 5
+    </ion-label>
+    <ion-reorder slot="end">
+      <ion-icon name="pizza"></ion-icon>
+    </ion-reorder>
+  </ion-item>
 
-      <ion-reorder>
-        <ion-item>
-          <ion-label>
-            Item 5 (the whole item can be dragged)
-          </ion-label>
-          </ion-item>
-      </ion-reorder>
+  <ion-item>
+    <ion-label>
+      Item 6
+    </ion-label>
+    <ion-reorder slot="end">
+      <ion-icon name="pizza"></ion-icon>
+    </ion-reorder>
+  </ion-item>
 
-    </ion-reorder-group>
-  </ion-list>
-</ion-content>
+  <!-- Items wrapped in a reorder, entire item can be dragged -->
+  <ion-reorder>
+    <ion-item>
+      <ion-label>
+        Item 7
+      </ion-label>
+    </ion-item>
+  </ion-reorder>
+
+  <ion-reorder>
+    <ion-item>
+      <ion-label>
+        Item 8
+      </ion-label>
+    </ion-item>
+  </ion-reorder>
+</ion-reorder-group>
 ```
 
 ```javascript
 const reorderGroup = document.querySelector('ion-reorder-group');
-reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
-  // finishing the reorder, true means ion-reorder-group with reorder the DOM
-  detail.complete(true);
 
-  // or:
-  // reorderGroup.complete(true)
+reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
+  // The `from` and `to` properties contain the index of the item
+  // when the drag started and ended, respectively
+  console.log('Dragged from index', detail.from, 'to', detail.to);
+
+  // Finish the reorder and position the item in the DOM based on
+  // where the gesture ended. This method can also be called directly
+  // by the reorder group
+  detail.complete();
 });
-```
\ No newline at end of file
+```
+
+#### Updating Data
+
+```javascript
+const items = [1, 2, 3, 4, 5];
+const reorderGroup = document.querySelector('ion-reorder-group');
+
+reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
+  // Before complete is called with the items they will remain in the
+  // order before the drag
+  console.log('Before complete', items);
+
+  // Finish the reorder and position the item in the DOM based on
+  // where the gesture ended. Update the items variable to the
+  // new order of items
+  items = detail.complete(items);
+
+  // After complete is called the items will be in the new order
+  console.log('After complete', items);
+});
+```
diff --git a/core/src/components/reorder-group/usage/react.md b/core/src/components/reorder-group/usage/react.md
index 4dbe998621..2f8f1f6cf8 100644
--- a/core/src/components/reorder-group/usage/react.md
+++ b/core/src/components/reorder-group/usage/react.md
@@ -1,57 +1,112 @@
 ```tsx
 import React from 'react';
 
-import { IonContent, IonList, IonItem, IonLabel, IonReorder, IonReorderGroup, IonIcon } from '@ionic/react';
+import { IonItem, IonLabel, IonReorder, IonReorderGroup, IonIcon } from '@ionic/react';
+
+function doReorder(event: CustomEvent) {
+  // 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);
+
+  // Finish the reorder and position the item in the DOM based on
+  // where the gesture ended. This method can also be called directly
+  // by the reorder group
+  event.detail.complete();
+}
 
 const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- The reorder gesture is disabled by default, enable it to drag and drop items --*/}
+    <IonReorderGroup disabled={false} onIonItemReorder={doReorder}>
+      {/*-- Default reorder icon, end aligned items --*/}
+      <IonItem>
+        <IonLabel>
+          Item 1
+        </IonLabel>
+        <IonReorder slot="end"></IonReorder>
+      </IonItem>
 
-  <IonContent>
-    <IonList>
-      <IonReorderGroup>
+      <IonItem>
+        <IonLabel>
+          Item 2
+        </IonLabel>
+        <IonReorder slot="end"></IonReorder>
+      </IonItem>
 
-        <IonItem>
-          <IonLabel>
-            Item 1
-          </IonLabel>
-          <IonReorder slot="end"></IonReorder>
-        </IonItem>
+      {/*-- Default reorder icon, start aligned items --*/}
+      <IonItem>
+        <IonReorder slot="start"></IonReorder>
+        <IonLabel>
+          Item 3
+        </IonLabel>
+      </IonItem>
 
-        <IonItem>
-          <IonLabel>
-            Item 2 (default ion-reorder slot="start")
-          </IonLabel>
-          <IonReorder slot="start"></IonReorder>
-        </IonItem>
+      <IonItem>
+        <IonReorder slot="start"></IonReorder>
+        <IonLabel>
+          Item 4
+        </IonLabel>
+      </IonItem>
 
-        <IonItem>
-          <IonLabel>
-            Item 3 (custom ion-reorder)
-          </IonLabel>
-          <IonReorder slot="end">
-            <IonIcon name="pizza" />
-          </IonReorder>
-        </IonItem>
-
-        <IonItem>
-          <IonLabel>
-            Item 4 (custom ion-reorder slot="start")
-          </IonLabel>
-          <IonReorder slot="start">
-            <IonIcon name="pizza" />
-          </IonReorder>
-        </IonItem>
-
-        <IonReorder>
-          <IonItem>
-            <IonLabel>
-              Item 5 (the whole item can be dragged)
-            </IonLabel>
-            </IonItem>
+      {/*-- Custom reorder icon end items --*/}
+      <IonItem>
+        <IonLabel>
+          Item 5
+        </IonLabel>
+        <IonReorder slot="end">
+          <IonIcon name="pizza"></IonIcon>
         </IonReorder>
+      </IonItem>
 
-      </IonReorderGroup>
-    </IonList>
-  </IonContent>
+      <IonItem>
+        <IonLabel>
+          Item 6
+        </IonLabel>
+        <IonReorder slot="end">
+          <IonIcon name="pizza"></IonIcon>
+        </IonReorder>
+      </IonItem>
+
+      {/*-- Items wrapped in a reorder, entire item can be dragged --*/}
+      <IonReorder>
+        <IonItem>
+          <IonLabel>
+            Item 7
+          </IonLabel>
+        </IonItem>
+      </IonReorder>
+
+      <IonReorder>
+        <IonItem>
+          <IonLabel>
+            Item 8
+          </IonLabel>
+        </IonItem>
+      </IonReorder>
+    </IonReorderGroup>
+  </>
+  }
 );
 
 export default Example
+```
+
+#### Updating Data
+
+```tsx
+const items = [1, 2, 3, 4, 5];
+
+function doReorder(event: CustomEvent) {
+  // Before complete is called with the items they will remain in the
+  // order before the drag
+  console.log('Before complete', this.items);
+
+  // Finish the reorder and position the item in the DOM based on
+  // where the gesture ended. Update the items variable to the
+  // new order of items
+  this.items = event.detail.complete(this.items);
+
+  // After complete is called the items will be in the new order
+  console.log('After complete', this.items);
+}
+```
diff --git a/core/src/components/reorder-group/usage/vue.md b/core/src/components/reorder-group/usage/vue.md
index 357f9dc35f..bcf11107c2 100644
--- a/core/src/components/reorder-group/usage/vue.md
+++ b/core/src/components/reorder-group/usage/vue.md
@@ -1,51 +1,118 @@
 ```html
 <template>
-  <ion-content>
-    <ion-list>
-      <ion-reorder-group>
+  <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
+  <ion-reorder-group @ionItemReorder="doReorder($event)" disabled="false">
+    <!-- Default reorder icon, end aligned items -->
+    <ion-item>
+      <ion-label>
+        Item 1
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
 
-        <ion-item>
-          <ion-label>
-            Item 1
-          </ion-label>
-          <ion-reorder slot="end"></ion-reorder>
-        </ion-item>
+    <ion-item>
+      <ion-label>
+        Item 2
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
 
-        <ion-item>
-          <ion-label>
-            Item 2 (default ion-reorder slot="start")
-          </ion-label>
-          <ion-reorder slot="start"></ion-reorder>
-        </ion-item>
+    <!-- Default reorder icon, start aligned items -->
+    <ion-item>
+      <ion-reorder slot="start"></ion-reorder>
+      <ion-label>
+        Item 3
+      </ion-label>
+    </ion-item>
 
-        <ion-item>
-          <ion-label>
-            Item 3 (custom ion-reorder)
-          </ion-label>
-          <ion-reorder slot="end">
-            <ion-icon name="pizza"></ion-icon>
-          </ion-reorder>
-        </ion-item>
+    <ion-item>
+      <ion-reorder slot="start"></ion-reorder>
+      <ion-label>
+        Item 4
+      </ion-label>
+    </ion-item>
 
-        <ion-item>
-          <ion-label>
-            Item 4 (custom ion-reorder slot="start")
-          </ion-label>
-          <ion-reorder slot="start">
-            <ion-icon name="pizza"></ion-icon>
-          </ion-reorder>
-        </ion-item>
+    <!-- Custom reorder icon end items -->
+    <ion-item>
+      <ion-label>
+        Item 5
+      </ion-label>
+      <ion-reorder slot="end">
+        <ion-icon name="pizza"></ion-icon>
+      </ion-reorder>
+    </ion-item>
 
-        <ion-reorder>
-          <ion-item>
-            <ion-label>
-              Item 5 (the whole item can be dragged)
-            </ion-label>
-            </ion-item>
-        </ion-reorder>
+    <ion-item>
+      <ion-label>
+        Item 6
+      </ion-label>
+      <ion-reorder slot="end">
+        <ion-icon name="pizza"></ion-icon>
+      </ion-reorder>
+    </ion-item>
 
-      </ion-reorder-group>
-    </ion-list>
-  </ion-content>
+    <!-- Items wrapped in a reorder, entire item can be dragged -->
+    <ion-reorder>
+      <ion-item>
+        <ion-label>
+          Item 7
+        </ion-label>
+      </ion-item>
+    </ion-reorder>
+
+    <ion-reorder>
+      <ion-item>
+        <ion-label>
+          Item 8
+        </ion-label>
+      </ion-item>
+    </ion-reorder>
+  </ion-reorder-group>
 </template>
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component()
+  export default class Example extends Vue {
+
+    doReorder(event) {
+      // 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);
+
+      // Finish the reorder and position the item in the DOM based on
+      // where the gesture ended. This method can also be called directly
+      // by the reorder group
+      event.detail.complete();
+    }
+  }
+</script>
+```
+
+#### Updating Data
+
+```html
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component()
+  export default class Example extends Vue {
+    items = [1, 2, 3, 4, 5];
+
+    doReorder(event) {
+      // Before complete is called with the items they will remain in the
+      // order before the drag
+      console.log('Before complete', this.items);
+
+      // Finish the reorder and position the item in the DOM based on
+      // where the gesture ended. Update the items variable to the
+      // new order of items
+      this.items = event.detail.complete(this.items);
+
+      // After complete is called the items will be in the new order
+      console.log('After complete', this.items);
+    }
+  }
+</script>
 ```
diff --git a/core/src/components/reorder/readme.md b/core/src/components/reorder/readme.md
index bf31a45a22..7e9a5846ad 100644
--- a/core/src/components/reorder/readme.md
+++ b/core/src/components/reorder/readme.md
@@ -1,19 +1,239 @@
 # ion-reorder
 
-Reorder is a component that allows an item to be dragged to change its order. It must be used within an `ion-reorder-group` to provide a visual drag and drop interface.
+Reorder is a component that allows an item in a group of items to be dragged to change its order within that group. It must be used within an `ion-reorder-group` to provide a visual drag and drop interface.
 
-`ion-reorder` is the anchor users will use to drag and drop items inside the `ion-reorder-group`.
+`ion-reorder` is the anchor used to drag and drop the items inside of the `ion-reorder-group`. See the [Reorder Group](../reorder-group) for more information on how to complete the reorder operation.
+
+
+<!-- Auto Generated Below -->
+
+
+## Usage
+
+### Angular / javascript
 
 ```html
+<!-- Default reorder icon, end aligned items -->
 <ion-item>
   <ion-label>
-    Item
+    Item 1
   </ion-label>
   <ion-reorder slot="end"></ion-reorder>
 </ion-item>
+
+<ion-item>
+  <ion-label>
+    Item 2
+  </ion-label>
+  <ion-reorder slot="end"></ion-reorder>
+</ion-item>
+
+<!-- Default reorder icon, start aligned items -->
+<ion-item>
+  <ion-reorder slot="start"></ion-reorder>
+  <ion-label>
+    Item 3
+  </ion-label>
+</ion-item>
+
+<ion-item>
+  <ion-reorder slot="start"></ion-reorder>
+  <ion-label>
+    Item 4
+  </ion-label>
+</ion-item>
+
+<!-- Custom reorder icon end items -->
+<ion-item>
+  <ion-label>
+    Item 5
+  </ion-label>
+  <ion-reorder slot="end">
+    <ion-icon name="pizza"></ion-icon>
+  </ion-reorder>
+</ion-item>
+
+<ion-item>
+  <ion-label>
+    Item 6
+  </ion-label>
+  <ion-reorder slot="end">
+    <ion-icon name="pizza"></ion-icon>
+  </ion-reorder>
+</ion-item>
+
+<!-- Items wrapped in a reorder, entire item can be dragged -->
+<ion-reorder>
+  <ion-item>
+    <ion-label>
+      Item 7
+    </ion-label>
+  </ion-item>
+</ion-reorder>
+
+<ion-reorder>
+  <ion-item>
+    <ion-label>
+      Item 8
+    </ion-label>
+  </ion-item>
+</ion-reorder>
+```
+
+
+### React
+
+```tsx
+import React from 'react';
+
+import { IonIcon, IonItem, IonLabel, IonReorder } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default reorder icon, end aligned items --*/}
+    <IonItem>
+      <IonLabel>
+        Item 1
+      </IonLabel>
+      <IonReorder slot="end"></IonReorder>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>
+        Item 2
+      </IonLabel>
+      <IonReorder slot="end"></IonReorder>
+    </IonItem>
+
+    {/*-- Default reorder icon, start aligned items --*/}
+    <IonItem>
+      <IonReorder slot="start"></IonReorder>
+      <IonLabel>
+        Item 3
+      </IonLabel>
+    </IonItem>
+
+    <IonItem>
+      <IonReorder slot="start"></IonReorder>
+      <IonLabel>
+        Item 4
+      </IonLabel>
+    </IonItem>
+
+    {/*-- Custom reorder icon end items --*/}
+    <IonItem>
+      <IonLabel>
+        Item 5
+      </IonLabel>
+      <IonReorder slot="end">
+        <IonIcon name="pizza"></IonIcon>
+      </IonReorder>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>
+        Item 6
+      </IonLabel>
+      <IonReorder slot="end">
+        <IonIcon name="pizza"></IonIcon>
+      </IonReorder>
+    </IonItem>
+
+    {/*-- Items wrapped in a reorder, entire item can be dragged --*/}
+    <IonReorder>
+      <IonItem>
+        <IonLabel>
+          Item 7
+        </IonLabel>
+      </IonItem>
+    </IonReorder>
+
+    <IonReorder>
+      <IonItem>
+        <IonLabel>
+          Item 8
+        </IonLabel>
+      </IonItem>
+    </IonReorder>
+  </>
+);
+
+export default Example;
+```
+
+
+### Vue
+
+```html
+<template>
+  <!-- Default reorder icon, end aligned items -->
+  <ion-item>
+    <ion-label>
+      Item 1
+    </ion-label>
+    <ion-reorder slot="end"></ion-reorder>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>
+      Item 2
+    </ion-label>
+    <ion-reorder slot="end"></ion-reorder>
+  </ion-item>
+
+  <!-- Default reorder icon, start aligned items -->
+  <ion-item>
+    <ion-reorder slot="start"></ion-reorder>
+    <ion-label>
+      Item 3
+    </ion-label>
+  </ion-item>
+
+  <ion-item>
+    <ion-reorder slot="start"></ion-reorder>
+    <ion-label>
+      Item 4
+    </ion-label>
+  </ion-item>
+
+  <!-- Custom reorder icon end items -->
+  <ion-item>
+    <ion-label>
+      Item 5
+    </ion-label>
+    <ion-reorder slot="end">
+      <ion-icon name="pizza"></ion-icon>
+    </ion-reorder>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>
+      Item 6
+    </ion-label>
+    <ion-reorder slot="end">
+      <ion-icon name="pizza"></ion-icon>
+    </ion-reorder>
+  </ion-item>
+
+  <!-- Items wrapped in a reorder, entire item can be dragged -->
+  <ion-reorder>
+    <ion-item>
+      <ion-label>
+        Item 7
+      </ion-label>
+    </ion-item>
+  </ion-reorder>
+
+  <ion-reorder>
+    <ion-item>
+      <ion-label>
+        Item 8
+      </ion-label>
+    </ion-item>
+  </ion-reorder>
+</template>
 ```
 
-<!-- Auto Generated Below -->
 
 
 ----------------------------------------------
diff --git a/core/src/components/reorder/usage/angular.md b/core/src/components/reorder/usage/angular.md
new file mode 100644
index 0000000000..2163e3c756
--- /dev/null
+++ b/core/src/components/reorder/usage/angular.md
@@ -0,0 +1,68 @@
+
+```html
+<!-- Default reorder icon, end aligned items -->
+<ion-item>
+  <ion-label>
+    Item 1
+  </ion-label>
+  <ion-reorder slot="end"></ion-reorder>
+</ion-item>
+
+<ion-item>
+  <ion-label>
+    Item 2
+  </ion-label>
+  <ion-reorder slot="end"></ion-reorder>
+</ion-item>
+
+<!-- Default reorder icon, start aligned items -->
+<ion-item>
+  <ion-reorder slot="start"></ion-reorder>
+  <ion-label>
+    Item 3
+  </ion-label>
+</ion-item>
+
+<ion-item>
+  <ion-reorder slot="start"></ion-reorder>
+  <ion-label>
+    Item 4
+  </ion-label>
+</ion-item>
+
+<!-- Custom reorder icon end items -->
+<ion-item>
+  <ion-label>
+    Item 5
+  </ion-label>
+  <ion-reorder slot="end">
+    <ion-icon name="pizza"></ion-icon>
+  </ion-reorder>
+</ion-item>
+
+<ion-item>
+  <ion-label>
+    Item 6
+  </ion-label>
+  <ion-reorder slot="end">
+    <ion-icon name="pizza"></ion-icon>
+  </ion-reorder>
+</ion-item>
+
+<!-- Items wrapped in a reorder, entire item can be dragged -->
+<ion-reorder>
+  <ion-item>
+    <ion-label>
+      Item 7
+    </ion-label>
+  </ion-item>
+</ion-reorder>
+
+<ion-reorder>
+  <ion-item>
+    <ion-label>
+      Item 8
+    </ion-label>
+  </ion-item>
+</ion-reorder>
+```
\ No newline at end of file
diff --git a/core/src/components/reorder/usage/javascript.md b/core/src/components/reorder/usage/javascript.md
new file mode 100644
index 0000000000..2163e3c756
--- /dev/null
+++ b/core/src/components/reorder/usage/javascript.md
@@ -0,0 +1,68 @@
+
+```html
+<!-- Default reorder icon, end aligned items -->
+<ion-item>
+  <ion-label>
+    Item 1
+  </ion-label>
+  <ion-reorder slot="end"></ion-reorder>
+</ion-item>
+
+<ion-item>
+  <ion-label>
+    Item 2
+  </ion-label>
+  <ion-reorder slot="end"></ion-reorder>
+</ion-item>
+
+<!-- Default reorder icon, start aligned items -->
+<ion-item>
+  <ion-reorder slot="start"></ion-reorder>
+  <ion-label>
+    Item 3
+  </ion-label>
+</ion-item>
+
+<ion-item>
+  <ion-reorder slot="start"></ion-reorder>
+  <ion-label>
+    Item 4
+  </ion-label>
+</ion-item>
+
+<!-- Custom reorder icon end items -->
+<ion-item>
+  <ion-label>
+    Item 5
+  </ion-label>
+  <ion-reorder slot="end">
+    <ion-icon name="pizza"></ion-icon>
+  </ion-reorder>
+</ion-item>
+
+<ion-item>
+  <ion-label>
+    Item 6
+  </ion-label>
+  <ion-reorder slot="end">
+    <ion-icon name="pizza"></ion-icon>
+  </ion-reorder>
+</ion-item>
+
+<!-- Items wrapped in a reorder, entire item can be dragged -->
+<ion-reorder>
+  <ion-item>
+    <ion-label>
+      Item 7
+    </ion-label>
+  </ion-item>
+</ion-reorder>
+
+<ion-reorder>
+  <ion-item>
+    <ion-label>
+      Item 8
+    </ion-label>
+  </ion-item>
+</ion-reorder>
+```
\ No newline at end of file
diff --git a/core/src/components/reorder/usage/react.md b/core/src/components/reorder/usage/react.md
new file mode 100644
index 0000000000..a0cf28c30a
--- /dev/null
+++ b/core/src/components/reorder/usage/react.md
@@ -0,0 +1,77 @@
+```tsx
+import React from 'react';
+
+import { IonIcon, IonItem, IonLabel, IonReorder } from '@ionic/react';
+
+const Example: React.SFC<{}> = () => (
+  <>
+    {/*-- Default reorder icon, end aligned items --*/}
+    <IonItem>
+      <IonLabel>
+        Item 1
+      </IonLabel>
+      <IonReorder slot="end"></IonReorder>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>
+        Item 2
+      </IonLabel>
+      <IonReorder slot="end"></IonReorder>
+    </IonItem>
+
+    {/*-- Default reorder icon, start aligned items --*/}
+    <IonItem>
+      <IonReorder slot="start"></IonReorder>
+      <IonLabel>
+        Item 3
+      </IonLabel>
+    </IonItem>
+
+    <IonItem>
+      <IonReorder slot="start"></IonReorder>
+      <IonLabel>
+        Item 4
+      </IonLabel>
+    </IonItem>
+
+    {/*-- Custom reorder icon end items --*/}
+    <IonItem>
+      <IonLabel>
+        Item 5
+      </IonLabel>
+      <IonReorder slot="end">
+        <IonIcon name="pizza"></IonIcon>
+      </IonReorder>
+    </IonItem>
+
+    <IonItem>
+      <IonLabel>
+        Item 6
+      </IonLabel>
+      <IonReorder slot="end">
+        <IonIcon name="pizza"></IonIcon>
+      </IonReorder>
+    </IonItem>
+
+    {/*-- Items wrapped in a reorder, entire item can be dragged --*/}
+    <IonReorder>
+      <IonItem>
+        <IonLabel>
+          Item 7
+        </IonLabel>
+      </IonItem>
+    </IonReorder>
+
+    <IonReorder>
+      <IonItem>
+        <IonLabel>
+          Item 8
+        </IonLabel>
+      </IonItem>
+    </IonReorder>
+  </>
+);
+
+export default Example;
+```
diff --git a/core/src/components/reorder/usage/vue.md b/core/src/components/reorder/usage/vue.md
new file mode 100644
index 0000000000..49b0fdcbdf
--- /dev/null
+++ b/core/src/components/reorder/usage/vue.md
@@ -0,0 +1,69 @@
+```html
+<template>
+  <!-- Default reorder icon, end aligned items -->
+  <ion-item>
+    <ion-label>
+      Item 1
+    </ion-label>
+    <ion-reorder slot="end"></ion-reorder>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>
+      Item 2
+    </ion-label>
+    <ion-reorder slot="end"></ion-reorder>
+  </ion-item>
+
+  <!-- Default reorder icon, start aligned items -->
+  <ion-item>
+    <ion-reorder slot="start"></ion-reorder>
+    <ion-label>
+      Item 3
+    </ion-label>
+  </ion-item>
+
+  <ion-item>
+    <ion-reorder slot="start"></ion-reorder>
+    <ion-label>
+      Item 4
+    </ion-label>
+  </ion-item>
+
+  <!-- Custom reorder icon end items -->
+  <ion-item>
+    <ion-label>
+      Item 5
+    </ion-label>
+    <ion-reorder slot="end">
+      <ion-icon name="pizza"></ion-icon>
+    </ion-reorder>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>
+      Item 6
+    </ion-label>
+    <ion-reorder slot="end">
+      <ion-icon name="pizza"></ion-icon>
+    </ion-reorder>
+  </ion-item>
+
+  <!-- Items wrapped in a reorder, entire item can be dragged -->
+  <ion-reorder>
+    <ion-item>
+      <ion-label>
+        Item 7
+      </ion-label>
+    </ion-item>
+  </ion-reorder>
+
+  <ion-reorder>
+    <ion-item>
+      <ion-label>
+        Item 8
+      </ion-label>
+    </ion-item>
+  </ion-reorder>
+</template>
+```
\ No newline at end of file
diff --git a/core/src/components/segment-button/readme.md b/core/src/components/segment-button/readme.md
index 328287dd1d..727b1b6008 100644
--- a/core/src/components/segment-button/readme.md
+++ b/core/src/components/segment-button/readme.md
@@ -611,7 +611,7 @@ export default Example;
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class MenuExample extends Vue {
+  export default class Example extends Vue {
     segmentButtonClicked(ev: any) {
       console.log('Segment button clicked', ev);
     }
diff --git a/core/src/components/segment-button/usage/vue.md b/core/src/components/segment-button/usage/vue.md
index 354d6f0b53..73802d6de6 100644
--- a/core/src/components/segment-button/usage/vue.md
+++ b/core/src/components/segment-button/usage/vue.md
@@ -141,7 +141,7 @@
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class MenuExample extends Vue {
+  export default class Example extends Vue {
     segmentButtonClicked(ev: any) {
       console.log('Segment button clicked', ev);
     }
diff --git a/core/src/components/segment/readme.md b/core/src/components/segment/readme.md
index 4e40913ee9..521753f864 100644
--- a/core/src/components/segment/readme.md
+++ b/core/src/components/segment/readme.md
@@ -429,7 +429,7 @@ export default Example;
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class MenuExample extends Vue {
+  export default class Example extends Vue {
     segmentChanged(ev: any) {
       console.log('Segment changed', ev);
     }
diff --git a/core/src/components/segment/usage/vue.md b/core/src/components/segment/usage/vue.md
index 0c564b223b..802c692c0f 100644
--- a/core/src/components/segment/usage/vue.md
+++ b/core/src/components/segment/usage/vue.md
@@ -95,7 +95,7 @@
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class MenuExample extends Vue {
+  export default class Example extends Vue {
     segmentChanged(ev: any) {
       console.log('Segment changed', ev);
     }
diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md
index f223da326b..a643304915 100644
--- a/core/src/components/select/readme.md
+++ b/core/src/components/select/readme.md
@@ -712,7 +712,7 @@ export default Example;
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class SelectExample extends Vue {
+  export default class Example extends Vue {
     customAlertOptions: any = {
       header: 'Pizza Toppings',
       subHeader: 'Select your toppings',
diff --git a/core/src/components/select/usage/vue.md b/core/src/components/select/usage/vue.md
index f19b9f5c91..f8eeca7d90 100644
--- a/core/src/components/select/usage/vue.md
+++ b/core/src/components/select/usage/vue.md
@@ -114,7 +114,7 @@
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class SelectExample extends Vue {
+  export default class Example extends Vue {
     customAlertOptions: any = {
       header: 'Pizza Toppings',
       subHeader: 'Select your toppings',
diff --git a/core/src/components/skeleton-text/readme.md b/core/src/components/skeleton-text/readme.md
index eae894e2f4..6fb78cdcf5 100644
--- a/core/src/components/skeleton-text/readme.md
+++ b/core/src/components/skeleton-text/readme.md
@@ -461,7 +461,7 @@ function onLoad() {
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class SkeletonTextExample extends Vue {
+  export default class Example extends Vue {
     data: any;
 
     mounted() {
diff --git a/core/src/components/skeleton-text/usage/vue.md b/core/src/components/skeleton-text/usage/vue.md
index 5b719c6c37..9b0e0c390e 100644
--- a/core/src/components/skeleton-text/usage/vue.md
+++ b/core/src/components/skeleton-text/usage/vue.md
@@ -136,7 +136,7 @@
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class SkeletonTextExample extends Vue {
+  export default class Example extends Vue {
     data: any;
 
     mounted() {
diff --git a/core/src/components/slides/readme.md b/core/src/components/slides/readme.md
index 5eeb05e67d..6ee310197a 100644
--- a/core/src/components/slides/readme.md
+++ b/core/src/components/slides/readme.md
@@ -549,7 +549,7 @@ export default Example;
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class SelectExample extends Vue {
+  export default class Example extends Vue {
     // Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
     slideOpts = {
       initialSlide: 1,
diff --git a/core/src/components/slides/usage/vue.md b/core/src/components/slides/usage/vue.md
index 1bfc6a6170..594051f158 100644
--- a/core/src/components/slides/usage/vue.md
+++ b/core/src/components/slides/usage/vue.md
@@ -18,7 +18,7 @@
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class SelectExample extends Vue {
+  export default class Example extends Vue {
     // Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
     slideOpts = {
       initialSlide: 1,
diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md
index e36c7a1c94..5347884a74 100644
--- a/core/src/components/toast/readme.md
+++ b/core/src/components/toast/readme.md
@@ -173,7 +173,6 @@ export class Toast extends Component<Props, State> {
     );
   }
 }
-
 ```
 
 
diff --git a/core/src/components/toast/usage/react.md b/core/src/components/toast/usage/react.md
index 0e57fc51c7..837cb7cd87 100644
--- a/core/src/components/toast/usage/react.md
+++ b/core/src/components/toast/usage/react.md
@@ -52,5 +52,4 @@ export class Toast extends Component<Props, State> {
     );
   }
 }
-
 ```