export ctx + update doc

doc/api.md

@@ -2,7 +2,7 @@
 
 ## MenuProvider
 
-It provides methods to handle popup menus imperatively.  The same methods are exposed to the child context with name `menuActions`.
+It provides methods to handle popup menus imperatively.  The same methods are exposed to the context property `menuActions`. This can be retrieved by HOC `withMenuContext` that adds `ctx` property to your component. Then simply call `props.ctx.menuActions.method()`.
 
 **Note:** It is important that `<MenuProvider />` is on the top of the component hierarchy (e.g. `ScrollView` should be inside of `MenuProvider`) and wraps all `<Menu />` components.
 This is needed in order to solve z-index issues.

examples/MenuMethodsExample.js

@@ -4,9 +4,19 @@ import Menu, {
   MenuProvider,
   MenuOptions,
   MenuOption,
-  MenuTrigger
+  MenuTrigger,
+  withMenuContext,
 } from 'react-native-popup-menu';
 
+const Openner = (props) => (
+  <TouchableOpacity style={{ paddingTop: 50 }}
+    onPress={() => props.ctx.menuActions.openMenu('menu-1')}>
+    <Text>Open menu from context</Text>
+  </TouchableOpacity>
+);
+
+const ContextOpenner = withMenuContext(Openner);
+
 export default class ControlledExample extends Component {
 
   onOptionSelect(value) {
@@ -28,7 +38,8 @@ export default class ControlledExample extends Component {
   render() {
     return (
       <MenuProvider style={{flexDirection: 'column', padding: 30}}>
-        <Menu onSelect={value => this.onOptionSelect(value)} ref={this.onRef}>
+        <Menu onSelect={value => this.onOptionSelect(value)}
+          name="menu-1" ref={this.onRef}>
           <MenuTrigger text='Select option'/>
           <MenuOptions>
             <MenuOption value={1} text='One' />
@@ -38,6 +49,7 @@ export default class ControlledExample extends Component {
         <TouchableOpacity style={{ paddingTop: 50 }} onPress={() => this.openMenu()}>
           <Text>Open menu from outside</Text>
         </TouchableOpacity>
+        <ContextOpenner />
       </MenuProvider>
     );
   }

src/index.js

@@ -2,7 +2,7 @@ import './polyfills';
 import { deprecatedComponent } from './helpers'
 
 import Menu from './Menu';
-import MenuProvider from './MenuProvider';
+import MenuProvider, { withCtx } from './MenuProvider';
 import MenuOption from './MenuOption';
 import MenuOptions from './MenuOptions';
 import MenuTrigger from './MenuTrigger';
@@ -27,4 +27,5 @@ export {
   MenuOptions,
   MenuTrigger,
   renderers,
+  withCtx as withMenuContext,
 };