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 ?