Skip to content
This repository has been archived by the owner on Sep 13, 2020. It is now read-only.

Commit

Permalink
Updating README for context menuActions feature
Browse files Browse the repository at this point in the history
  • Loading branch information
Kureev Alexey committed Sep 17, 2015
1 parent cabf304 commit fa8a484
Showing 1 changed file with 29 additions and 17 deletions.
46 changes: 29 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
### Content
- [Installation](#installation)
- [Usage example](#usage-example)
- [Managing menu state](#managing-menu-state)
- [Component props](#component-props)
- [Special thanks](#special-thanks)
- [Questions?](#questions)
Expand Down Expand Up @@ -50,31 +51,42 @@ var Application = React.createClass({
}
});
```
### Managing menu state
Managing menu state works thru the exposed `menuActions`. To access `menuActions`, you need to use context. (there is an [awesome article](https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html) for that).

Clicking on any menu item should cause closing menu. It can be done by using `menuActions` which are passed thru props to `menu` component. Example looks like this:
`menuActions` consists of following method(s):
- `close` (Void) - Close menu
- `toggle` (Void) - Toggle menu (close / open)
- `open` (Void) - Open menu

Usage example:
```javascript
var Menu = React.createClass({
about: function() {
this.props.menuActions.close();
this.props.navigator.push({...});
},
class Button extends Component {
handlePress(e) {
this.context.menuActions.toggle();
if (this.props.onPress) {
this.props.onPress(e);
}
}

render: function() {
render() {
return (
<View>
<Text>Menu</Text>
<Text onPress={this.about}>About</Text>
</View>
<TouchableOpacity
onPress={this.handlePress.bind(this)}>
<Text style={this.props.style}>{this.props.children}</Text>
</TouchableOpacity>
);
}
});
```
}

`menuActions` consists of following method(s):
- `close` (Void) - Close menu
- `toggle` (Void) - Toggle menu (close / open)
- `open` (Void) - Open menu
/**
* This part is very important. Without it you wouldn't be able to access `menuActions`
* @type {Object}
*/
Button.contextTypes = {
menuActions: React.PropTypes.object.isRequired
};
```

### Component props
- `menu` (React.Component) - Menu component
Expand Down

0 comments on commit fa8a484

Please sign in to comment.