diff --git a/README.md b/README.md
index 5f41e41..d6a8cfd 100644
--- a/README.md
+++ b/README.md
@@ -23,28 +23,33 @@ npm install react-native-actionsheet --save
## Usage
```js
-import ActionSheet from 'react-native-actionsheet'
+import ActionSheet from "react-native-actionsheet";
+import { useRef } from "react";
+
+const Demo = () => {
+ const actionSheetRef = useRef();
-class Demo extends React.Component {
showActionSheet = () => {
- this.ActionSheet.show()
- }
- render() {
- return (
-
- Open ActionSheet
- this.ActionSheet = o}
- title={'Which one do you like ?'}
- options={['Apple', 'Banana', 'cancel']}
- cancelButtonIndex={2}
- destructiveButtonIndex={1}
- onPress={(index) => { /* do something */ }}
- />
-
- )
- }
-}
+ actionSheetRef.current.show();
+ };
+
+ return (
+
+ Open ActionSheet
+ {
+ /* do something */
+ }}
+ />
+
+ );
+};
+
```
@@ -63,26 +68,34 @@ const options = [
Durian
]
-class Demo extends React.Component {
+const Demp = () => {
+ const actionSheetRef = useRef();
+
showActionSheet = () => {
- this.ActionSheet.show()
- }
- render() {
- return (
-
- Open ActionSheet
- this.ActionSheet = o}
- title={Which one do you like?}
- options={options}
- cancelButtonIndex={0}
- destructiveButtonIndex={4}
- onPress={(index) => { /* do something */ }}
- />
-
- )
- }
-}
+ actionSheetRef.current.show();
+ };
+
+ return (
+
+ Open ActionSheet
+
+ Which one do you like?
+
+ }
+ options={options}
+ cancelButtonIndex={0}
+ destructiveButtonIndex={4}
+ onPress={(index) => {
+ /* do something */
+ }}
+ />
+
+ );
+};
+
```
### How to redesign style ?