docs(react): update component usage docs (#17615)

ionic-team · Feb 26, 2019 · 22d1aee · 22d1aee
1 parent f44c17e
commit 22d1aee
Show file tree

Hide file tree

Showing 113 changed files with 7,207 additions and 0 deletions.
diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md
@@ -123,6 +123,73 @@ async function presentActionSheet() {
 ```
 
 
+### React
+
+```typescript
+import React, { Component } from 'react'
+import { IonActionSheet } from '@ionic/react';
+
+type Props = {}
+type State = {
+  showActionSheet: boolean
+}
+
+export default class ActionSheetExample extends Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      showActionSheet: false
+    };
+  }
+
+  render() {
+    return (
+      <IonActionSheet
+        isOpen={this.state.showActionSheet}
+        onDidDismiss={() => this.setState(() => ({ showActionSheet: false }))}
+        buttons={[{
+          text: 'Delete',
+          role: 'destructive',
+          icon: 'trash',
+          handler: () => {
+            console.log('Delete clicked');
+          }
+        }, {
+          text: 'Share',
+          icon: 'share',
+          handler: () => {
+            console.log('Share clicked');
+          }
+        }, {
+          text: 'Play (open modal)',
+          icon: 'arrow-dropright-circle',
+          handler: () => {
+            console.log('Play clicked');
+          }
+        }, {
+          text: 'Favorite',
+          icon: 'heart',
+          handler: () => {
+            console.log('Favorite clicked');
+          }
+        }, {
+          text: 'Cancel',
+          icon: 'close',
+          role: 'cancel',
+          handler: () => {
+            console.log('Cancel clicked');
+          }
+        }]}
+      >
+      </IonActionSheet>
+    );
+  }
+}
+
+```
+
+
 
 ## Properties
 

diff --git a/core/src/components/action-sheet/usage/react.md b/core/src/components/action-sheet/usage/react.md
@@ -0,0 +1,63 @@
+```typescript
+import React, { Component } from 'react'
+import { IonActionSheet } from '@ionic/react';
+
+type Props = {}
+type State = {
+  showActionSheet: boolean
+}
+
+export default class ActionSheetExample extends Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      showActionSheet: false
+    };
+  }
+
+  render() {
+    return (
+      <IonActionSheet
+        isOpen={this.state.showActionSheet}
+        onDidDismiss={() => this.setState(() => ({ showActionSheet: false }))}
+        buttons={[{
+          text: 'Delete',
+          role: 'destructive',
+          icon: 'trash',
+          handler: () => {
+            console.log('Delete clicked');
+          }
+        }, {
+          text: 'Share',
+          icon: 'share',
+          handler: () => {
+            console.log('Share clicked');
+          }
+        }, {
+          text: 'Play (open modal)',
+          icon: 'arrow-dropright-circle',
+          handler: () => {
+            console.log('Play clicked');
+          }
+        }, {
+          text: 'Favorite',
+          icon: 'heart',
+          handler: () => {
+            console.log('Favorite clicked');
+          }
+        }, {
+          text: 'Cancel',
+          icon: 'close',
+          role: 'cancel',
+          handler: () => {
+            console.log('Cancel clicked');
+          }
+        }]}
+      >
+      </IonActionSheet>
+    );
+  }
+}
+
+```