updated documentation

.npmignore

@@ -6,3 +6,4 @@ target/
 __tests__/
 __mocks__/
 *.demo.gif
+doc/

README.md

@@ -1,30 +1,30 @@
 # react-native-popup-menu
 
-Extensible popup menu component for React Native.
-Target platforms are both Android and iOS.
+Extensible popup menu component for React Native for both Android and iOS.
 
+Features:
+* Simple to use popup/context menu
+* Multiple modes: animated, not animated or slide in from bottom
+* Easy styling
+* Customizable on various levels - menu options, positioning, animations
+* Can work as controlled as well as uncontrolled component
+* Different lifecycle hooks
+
+![Popup menu](doc/img/context-menu.png)
 ## Installation
 
 ```
 npm install react-native-popup-menu --save
 ```
 
-## Demo
-
-<kbd>
-![](./android.demo.gif)
-</kbd>
-
 ## Basic Usage
-Wrap your application inside `MenuContext` and then simply use `Menu` component where you need it. Below you can find simple examples.
+Wrap your application inside `MenuContext` and then simply use `Menu` component where you need it. Below you can find a simple example.
 
 For more detailed documentation check [API](./doc/api.md).
 
-### Context menu - uncontrolled
-
 ```js
 import React from 'react';
-import { Text, AppRegistry } from 'react-native';
+import { Text } from 'react-native';
 import Menu, {
   MenuContext,
   MenuOptions,
@@ -49,70 +49,14 @@ export const App = () => (
 );
 ```
 
-### Context menu - controlled
-
-```js
-export default class ControlledExample extends Component {
-
-  constructor(props, ctx) {
-    super(props, ctx);
-    this.state = { opened: true };
-  }
-
-  onOptionSelect(value) {
-    alert(`Selected number: ${value}`);
-    this.setState({ opened: false });
-  }
-
-  render() {
-    return (
-      <MenuContext
-        style={{flexDirection: 'column', padding: 30}}>
-        <Text>Hello world!</Text>
-        <Menu
-          opened={this.state.opened}
-          onBackdropPress={() => this.setState({ opened: false })}
-          onSelect={value => this.onOptionSelect(value)}>
-          <MenuTrigger
-            onPress={() => this.setState({ opened: true })}
-            text='Select option'/>
-          <MenuOptions>
-            <MenuOption value={1} text='One' />
-            <MenuOption value={2}>
-              <Text style={{color: 'red'}}>Two</Text>
-            </MenuOption>
-            <MenuOption value={3} disabled={true} text='Three' />
-          </MenuOptions>
-        </Menu>
-      </MenuContext>
-    );
-  }
-
-}
-```
-
-### Slide-in menu
-
-```js
-import { ..., renderers} from 'react-native-popup-menu';
-
-// 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
 
+- [Examples](doc/examples.md)
 - [API](doc/api.md)
 - [Extension points](doc/extensions.md)
-- [Examples](examples/)
+
+## Demo
+
+<kbd>
+![](./android.demo.gif)
+</kbd>

doc/examples.md

@@ -0,0 +1,113 @@
+# Examples
+## Basic menu
+[BasicExample](../examples/BasicExample.js):
+Most basic example showing menu in its uncontrolled form where menu automatically opens once user click the trigger or as a result of imperative API.
+
+![basic](img/basic.png)
+```js
+<Menu onSelect={value => alert(`Selected number: ${value}`)}>
+  <MenuTrigger text='Select option' />
+  <MenuOptions>
+    <MenuOption value={1} text='One' />
+    <MenuOption value={2}>
+      <Text style={{color: 'red'}}>Two</Text>
+    </MenuOption>
+    <MenuOption value={3} disabled={true} text='Three' />
+  </MenuOptions>
+</Menu>
+```
+Both `MenuTrigger` and `MenuOption` can have arbitrary children so you have full power over its styling.
+Attribute `text` is just simple shorthand for `Text` child as it is the most common case.
+
+## Declarative menu
+[ControlledExample](../examples/ControlledExample.js):
+Menu can be controlled also declaratively via properties.
+```js
+<Menu
+  opened={this.state.opened}
+  onBackdropPress={() => this.onBackdropPress()}
+  onSelect={value => this.onOptionSelect(value)}>
+  <MenuTrigger
+    onPress={() => this.onTriggerPress()}
+    text='Select option'/>
+```
+
+## Slide in menu
+[Example](../examples/Example.js):
+In addition to default popup menu, menu (options) can slide in from bottom of the screen.
+```js
+import { renderers } from 'react-native-popup-menu';
+const { SlideInMenu } = renderers;
+...
+<Menu name="numbers" renderer={SlideInMenu} onSelect={value => this.selectNumber(value)}>
+  <MenuTrigger style={styles.trigger}>
+    <Text style={styles.triggerText}>Slide-in menu...</Text>
+  </MenuTrigger>
+
+```
+You can select one of our provided `renderers` or you can write your own renderer.
+This allow you to define animations, position of menu and much more.
+Renderer can be set on menu level or globally via `Menu.setDefaultRenderer`.
+
+For more details see [extensions](extensions.md) documentation.
+
+## Custom menu options
+[ExtensionExample](../examples/ExtensionExample.js):
+You can also define your own `MenuOption`s if you want to use more complex options often.
+Another nice use case is to have menu options with icons.
+
+![checked](img/checked.png)
+```js
+<MenuOptions>
+  <CheckedOption value={1} text='One' />
+  <CheckedOption checked value={2} text='Two' />
+</MenuOptions>
+...
+const CheckedOption = (props) => (
+  <MenuOption {...props} text={(props.checked ? '\u2713 ' : '') + props.text} />
+)
+```
+It is important to pass all (other) props to underlaying `MenuOption`.
+For more details see [extensions](extensions.md) documentation.
+
+## Styled menu
+[StylingExample](../examples/StylingExample.js):
+Although you can style options and triggers directly via its children,
+you can achieve almost any styling `customStyles` property on various levels.
+
+![styled](img/styled.png)
+```js
+<Menu renderer={this.state.renderer}>
+  <MenuTrigger text='Select option' customStyles={triggerStyles} />
+  <MenuOptions customStyles={optionsStyles}>
+    <MenuOption text='Context Menu'
+      onSelect={() => this.setState({renderer: ContextMenu})}/>
+    <MenuOption text='Slide-in Menu'
+      onSelect={() => this.setState({renderer: SlideInMenu})}/>
+    <MenuOption text='Three (custom)' customStyles={optionStyles}
+      onSelect={() => alert('Selected custom styled option')} />
+    <MenuOption disabled={true}>
+      <Text style={{color: '#ccc'}}>Four (disabled)</Text>
+    </MenuOption>
+  </MenuOptions>
+</Menu>
+...
+const triggerStyles = {
+  triggerText: {
+    color: 'white',
+  },
+  triggerWrapper: {
+    padding: 5,
+    backgroundColor: 'blue',
+  },
+  triggerTouchable: {
+    underlayColor: 'darkblue',
+    activeOpacity: 70,
+  },
+};
+```
+For exact definitions of `customStyles` please refer to [API](api.md).
+Also note that `MenuOption` can have either `value` or directly attached `onSelect` handler as in this case.
+
+
+More examples can be found in [examples](../examples/) directory.

examples/ExtensionExample.js

@@ -9,7 +9,7 @@ import Menu, {
 } from 'react-native-popup-menu';
 
 const CheckedOption = (props) => (
-  <MenuOption {...props} text={'\u2713 ' + props.text} />
+  <MenuOption {...props} text={(props.checked ? '\u2713 ' : '') + props.text} />
 )
 
 /* You can set default renderer for all menus just once in your application: */
@@ -24,8 +24,8 @@ const ExtensionExample = () => (
     >
       <MenuTrigger text='Select option' />
       <MenuOptions>
-        <MenuOption value={1} text='One' />
-        <CheckedOption value={2} text='Two' />
+        <CheckedOption value={1} text='One' />
+        <CheckedOption checked value={2} text='Two' />
       </MenuOptions>
     </Menu>
   </MenuContext>