status-im
/
react-native-popup-menu
mirror of https://github.com/status-im/react-native-popup-menu.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

docu update - renderers

This commit is contained in:
Martin Bielik 2016-05-31 13:14:24 +02:00
parent c4e34103ff
commit 7bb11c91fa
2 changed files with 31 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
README.md
View File

@ -16,7 +16,7 @@ npm install react-native-popup-menu --save
## Basic Usage
### Uncontrolled example
### Context menu - uncontrolled
```js
import React from 'react';
@ -25,7 +25,8 @@ import Menu, {
MenuContext,
MenuOptions,
MenuOption,
MenuTrigger
MenuTrigger,
renderers
} from 'react-native-popup-menu';
export const App = () => (
@ -45,7 +46,7 @@ export const App = () => (
);
```
### Controlled example
### Context menu - controlled
```js
export default class ControlledExample extends Component {
@ -87,6 +88,24 @@ export default class ControlledExample extends Component {
}
```
### Slide-in menu
```js
// NOTE: `onSelect` handler can be also passed to `MenuOption`'s props
export const App = () => (
<MenuContext style={{flexDirection: 'column', padding: 30}}>
<Text>Hello world!</Text>
<Menu renderer={renderers.SlideInMenu}>
<MenuTrigger text='Select option' />
<MenuOptions>
<MenuOption onSelect={() => alert('option one')} text='One' />
<MenuOption onSelect={() => alert('option two')} text='Two' />
</MenuOptions>
</Menu>
</MenuContext>
);
```
## Documentation
- [API](doc/api.md)

9
doc/api.md
View File

@ -25,6 +25,7 @@ Root menu component defining menu name and providing menu events.
|---|---|---|---|---|
|`name`|`String`|Optional|`auto-generated`|Unique name of menu|
|`opened`|`Boolean`|Optional||Declaratively states if menu is opened. When this prop is provided, menu is controlled and imperative API won't work.|
|`renderer`|`Function`|Optional|`ContextMenu`|Defines position, animation and basic menu styles (currently available renderers are `ContextMenu` and `SlideInMenu`)|
### Events
| Event Name | Arguments | Notes |
@ -85,3 +86,11 @@ Wrapper component of menu option.
|---|---|---|
|`onSelect`||Triggered when option is selected. When event handler returns `false`, the popup menu remains open. Note: If this event handler is defined, it suppress `onSelect` handler of `<Menu />`|
## renderers
Renderers are react components which wraps `MenuOptions` and are responsible for menu position and animation.
In `renderers` module there are already provided two renderers - `ContextMenu` (default) and `SlideInMenu`.
It is possible to extend menu and use custom renderer (see implementation of existing renderers).
NOTE: If you only need to add styles or wrap `MenuOptions` with your own component, use `optionsContainerStyle` or `renderOptionsContainer` option of `MenuOptions` instead.