<script language="JavaScript">
<!--
function _AN_global_var_init(){
	_AN_this_url = "/prx/000/";
	_AN_base_scheme = "https";
	_AN_base_host = "https://github.com";
	_AN_base_path = "https://github.com/selvagsz/react-power-select/compare/";
	_AN_encode_urls = 0;
	_AN_mpo = 1;
	_AN_md = 0;
	_AN_rel_urls = 1;
	_AN_nav_switch = 0;
	_AN_nav_allowurl = 1;
	_AN_nav_override = 0;
	_AN_has_iframe = 0;
	_AN_dbg_flags = null;
	_AN_nav_use_aaa = 1;
	_AN_expires_pass = 0;
	_AN_wrap_evthandlers = 0;
	_AN_rewrite_param_exact = 0;
	_AN_obj_params = {};
} 
_AN_global_var_init();
//-->
</script>
<script language="JavaScript" src="/prx/001/http/localh/an_util.js"></script>
<script language="JavaScript" src="/prx/001/http/localh/NSLib.js"></script>

diff --git a/docs/app/Demos/PowerSelect/ArrayOfObjectsDemo.js b/docs/app/Demos/PowerSelect/ArrayOfObjectsDemo.js
index bf6c2b4..1a461ae 100644
--- a/docs/app/Demos/PowerSelect/ArrayOfObjectsDemo.js
+++ b/docs/app/Demos/PowerSelect/ArrayOfObjectsDemo.js
@@ -1,14 +1,14 @@
 import React, { Component } from 'react';
-import PowerSelect from 'src/PowerSelect';
+import { PowerSelect, Option } from 'src';
 import { countries } from '../constants';
 
 export default class ArrayOfObjectsDemo extends Component {
   state = {
-    selectedCountry: null,
+    selectedCountry: 'BRA',
   };
 
-  handleChange = ({ option }) => {
-    this.setState({ selectedCountry: option });
+  handleChange = ({ value }) => {
+    this.setState({ selectedCountry: value });
   };
 
   render() {
@@ -18,10 +18,24 @@ export default class ArrayOfObjectsDemo extends Component {
         <PowerSelect options="{countries}" selected="{this.state.selectedCountry}" - optionLabelPath="name" onChange="{this.handleChange}" placeholder="Select your country" - />
+          searchIndices={['name']}
+          selectedOptionComponent={({ value }) => {
+            let selectedOption = countries.find(country => country.code === value);
+            return selectedOption.name;
+          }}
+        >
+          {({ results }) => {
+            return results.map(option => {
+              return (
+                <Option key="{option.code}" value="{option.code}">
+                  {option.name}
+                </Option>
+              );
+            });
+          }}
+        </PowerSelect>
       </div>
     );
   }
diff --git a/src/DefaultOption.js b/src/DefaultOption.js
new file mode 100644
index 0000000..b7aedda
--- /dev/null
+++ b/src/DefaultOption.js
@@ -0,0 +1,5 @@
+import React, { Component } from 'react';
+
+export default function SelectedOption({ option, select }) {
+  return option;
+}
diff --git a/src/DropdownMenu.js b/src/DropdownMenu.js
index 92faa16..4c1c72a 100644
--- a/src/DropdownMenu.js
+++ b/src/DropdownMenu.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import cx from 'classnames';
 import { renderComponent } from './utils';
-import Options from './Options';
 
 export default class DropdownMenu extends Component {
   componentWillMount() {
@@ -21,6 +20,7 @@ export default class DropdownMenu extends Component {
 
   render() {
     let {
+      children,
       className,
       select,
       handleKeyDown,
@@ -43,7 +43,7 @@ export default class DropdownMenu extends Component {
       >
         {beforeOptionsComponent && renderComponent(beforeOptionsComponent, { select })}
 
-        <Options select="{select}" highlightedOption="{highlightedOption}" {...otherProps />
+        {children}
 
         {afterOptionsComponent && renderComponent(afterOptionsComponent, { select })}
       </div>
diff --git a/src/Option.js b/src/Option.js
index 09ddc82..e43f110 100644
--- a/src/Option.js
+++ b/src/Option.js
@@ -1,36 +1,30 @@
 import React, { Component } from 'react';
 import cx from 'classnames';
-import RenderOption from './RenderOption';
 
-export default class Option extends Component {
-  render() {
-    let {
-      option,
-      select,
-      disabled,
-      optionIndex,
-      optionLabelPath,
-      optionComponent,
-      isHighlighted,
-      onOptionClick,
-    } = this.props;
-    let isDisabled = disabled || option.disabled;
-    return (
-      <div - className="{cx('PowerSelect__Option'," { - PowerSelect__Option--disabled : isDisabled - PowerSelect__Option--highlighted : isHighlighted - } - data-option-index="{optionIndex}" - onClick="{isDisabled" ? null : onOptionClick ->
-        <RenderOption - option="{option}" - optionLabelPath="{optionLabelPath}" - optionComponent="{optionComponent}" - select="{select}" - />
-      </div>
-    );
-  }
+export default function Option({
+  value,
+  disabled,
+  isHighlighted,
+  optionIndex,
+  onOptionClick,
+  children,
+}) {
+  return (
+    <div + className="{cx('PowerSelect__Option'," { + PowerSelect__Option--disabled : disabled + PowerSelect__Option--highlighted : isHighlighted + } + data-option-index="{optionIndex}" + onClick="{" + disabled + ? null + : (=""> {
+              onOptionClick(value);
+            }
+      }
+    >
+      {children}
+    </div>
+  );
 }
diff --git a/src/Options.js b/src/Options.js
index c6ed9a7..b1aeb91 100644
--- a/src/Options.js
+++ b/src/Options.js
@@ -38,47 +38,67 @@ export default class Options extends Component {
     }
   }
 
-  renderOptions(options, optGroupDisabled = false) {
-    let { select, optionLabelPath, optionComponent, highlightedOption, onOptionClick } = this.props;
-    return options.map((option, index) => {
-      let optionIndex = getOptionIndex(this.props.options, option);
-      if (isOptGroup(option)) {
-        return (
-          <div - key="{index}" - data-group-index="{optionIndex}" - className="{cx('PowerSelect__OptGroup'," { - PowerSelect__OptGroup--disabled : !!option.disabled - } ->
-            <div className="PowerSelect__OptGroup__Label">{option.label}</div>
-            {this.renderOptions(option.options, option.disabled)}
-          </div>
-        );
+  // renderOptions(options, optGroupDisabled = false) {
+  //   let { select, optionLabelPath, optionComponent, highlightedOption, onOptionClick } = this.props;
+  //   return options.map((option, index) => {
+  //     let optionIndex = getOptionIndex(this.props.options, option);
+  //     if (isOptGroup(option)) {
+  //       return (
+  //         <div + key="{index}" + data-group-index="{optionIndex}" + className="{cx('PowerSelect__OptGroup'," { + PowerSelect__OptGroup--disabled : !!option.disabled + } + />
+  //           <div className="PowerSelect__OptGroup__Label">{option.label}</div>
+  //           {this.renderOptions(option.options, option.disabled)}
+  //         </div>
+  //       );
+  //     }
+  //     return (
+  //       <Option + key="{index}" + optionIndex="{optionIndex}" + option="{option}" + select="{select}" + disabled="{optGroupDisabled}" + optionLabelPath="{optionLabelPath}" + optionComponent="{optionComponent}" + isHighlighted="{option" highlightedOption + onOptionClick="{()" /> {
+  //           onOptionClick(option);
+  //         }}
+  //       />
+  //     );
+  //   });
+  // }
+
+  renderOptions() {
+    let { children, options, highlightedOption, onOptionClick } = this.props;
+    return React.Children.map(children, (child, index) => {
+      let optionIndex = getOptionIndex(options, options[index]);
+      if (child === null) {
+        return null;
+      }
+
+      if (child.type === Option) {
+        return React.cloneElement(child, {
+          ...child.props,
+          isHighlighted: child.props.value === highlightedOption,
+          optionIndex,
+          onOptionClick,
+        });
       }
-      return (
-        <Option - key="{index}" - optionIndex="{optionIndex}" - option="{option}" - select="{select}" - disabled="{optGroupDisabled}" - optionLabelPath="{optionLabelPath}" - optionComponent="{optionComponent}" - isHighlighted="{option" highlightedOption - onOptionClick="{()"> {
-            onOptionClick(option);
-          }}
-        />
-      );
+
+      return child;
     });
   }
 
   render() {
-    let { options } = this.props;
     return (
       <div className="PowerSelect__Options" ref="{optionsList"> (this.optionsList = optionsList)}>
-        {this.renderOptions(options)}
+        {this.renderOptions()}
       </div>
     );
   }
diff --git a/src/Select.js b/src/Select.js
index c2f14c8..f85859e 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -1,9 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import Dropdown from './Dropdown';
 import SelectTrigger from './SelectTrigger';
+import Dropdown from './Dropdown';
 import DropdownMenu from './DropdownMenu';
+import Options from './Options';
+import DefaultOption from './DefaultOption';
 import {
   matcher,
   isOptGroup,
@@ -158,7 +160,7 @@ export default class Select extends Component {
   };
 
   search = (searchTerm, callback) => {
-    let { options, optionLabelPath, matcher, searchIndices = optionLabelPath } = this.props;
+    let { options, matcher, searchIndices } = this.props;
     let filteredOptions = filterOptions({
       options,
       searchTerm: searchTerm || '',
@@ -336,11 +338,11 @@ export default class Select extends Component {
 
   render() {
     let {
+      children,
       className,
       tabIndex,
       selected,
       showClear,
-      optionLabelPath,
       optionComponent,
       placeholder,
       disabled,
@@ -379,7 +381,6 @@ export default class Select extends Component {
           <Trigger selectedOption="{selected}" highlightedOption="{highlightedOption}" - optionLabelPath="{optionLabelPath}" selectedOptionLabelPath="{selectedOptionLabelPath}" selectedOptionComponent="{selectedOptionComponent}" triggerLHSComponent="{triggerLHSComponent}" @ -402,7 +403,6 @ export default class Select extends Component { minWidth="{this.powerselect.offsetWidth}" options="{options}" selected="{selected}" - optionLabelPath="{optionLabelPath}" optionComponent="{optionComponent}" onOptionClick="{this.handleOptionClick}" handleKeyDown="{this.handleKeyDown}" @ -410,7 +410,15 @ export default class Select extends Component { select="{selectApi}" beforeOptionsComponent="{beforeOptionsComponent}" afterOptionsComponent="{afterOptionsComponent}" - />
+          >
+            <Options + options="{options}" + highlightedOption="{highlightedOption}" + onOptionClick="{this.handleOptionClick}" +>
+              {children({ results: options, select: selectApi })}
+            </Options>
+          </DropdownMenu>
         )}
       </Dropdown>
     );
@@ -429,12 +437,11 @@ Select.defaultProps = {
   tabIndex: 0,
   showClear: true,
   closeOnSelect: true,
-  optionLabelPath: null,
   optionComponent: null,
   triggerComponent: SelectTrigger,
   triggerLHSComponent: null,
   triggerRHSComponent: null,
-  selectedOptionComponent: null,
+  selectedOptionComponent: DefaultOption,
   beforeOptionsComponent: null,
   afterOptionsComponent: null,
   matcher: matcher,
diff --git a/src/SelectTrigger.js b/src/SelectTrigger.js
index 3e5c9fb..7336566 100644
--- a/src/SelectTrigger.js
+++ b/src/SelectTrigger.js
@@ -3,23 +3,17 @@ import RenderOption from './RenderOption';
 import TriggerWrapper from './TriggerWrapper';
 
 export default function Trigger({
-  selectedOption,
-  optionLabelPath,
+  selectedOption: option,
   selectedOptionComponent,
   placeholder,
   select,
   ...rest
 }) {
   return (
-    <TriggerWrapper value="{selectedOption}" select="{select}" {...rest>
+    <TriggerWrapper value="{option}" select="{select}" {...rest>
       <div className="PowerSelect__TriggerLabel">
-        {selectedOption ? (
-          <RenderOption - option="{selectedOption}" - optionLabelPath="{optionLabelPath}" - optionComponent="{selectedOptionComponent}" - select="{select}" - />
+        {option ? (
+          selectedOptionComponent({ option, select })
         ) : (
           <span className="PowerSelect__Placeholder">{placeholder}</span>
         )}
diff --git a/src/index.js b/src/index.js
index 2403e3a..df63dbf 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,8 @@ import PowerSelect from './PowerSelect';
 import TypeAhead from './TypeAhead';
 import TypeAheadSelectTrigger from './TypeAhead/SelectTrigger';
 import PowerSelectMultiple from './PowerSelectMultiple';
+import Option from './Option';
 
 TypeAhead.Trigger = TypeAheadSelectTrigger;
 
-export { PowerSelect, TypeAhead, PowerSelectMultiple };
+export { PowerSelect, TypeAhead, PowerSelectMultiple, Option };
