diff --git a/README.md b/README.md
index 75330e24..e9c434c7 100644
--- a/README.md
+++ b/README.md
@@ -99,6 +99,28 @@ Required: `true`
Please see the example above
+#### autocompleteItem
+Type: `Functional React Component`,
+Required: `false`
+
+The function takes props with `suggestion` key (see the example below).
+We highly recommend that you create your own custom `AutocompleteItem` and pass it as a prop.
+
+```js
+// autocompleteItem example (with font-awesome icon)
+render() {
+ const AutocompleteItem = ({ suggestion }) => (
{suggestion}
)
+
+ return (
+
+ )
+}
+```
+
#### classNames
Type: `Object`,
Required: `false`
diff --git a/src/PlacesAutocomplete.js b/src/PlacesAutocomplete.js
index 88772382..36f20083 100644
--- a/src/PlacesAutocomplete.js
+++ b/src/PlacesAutocomplete.js
@@ -158,7 +158,6 @@ class PlacesAutocomplete extends React.Component {
return (Location )
}
- // TODO: Autocomplete item should be customizable.
renderAutocomplete() {
const { autocompleteItems } = this.state
if (autocompleteItems.length === 0) { return null }
@@ -170,11 +169,10 @@ class PlacesAutocomplete extends React.Component {
{autocompleteItems.map((p, idx) => (
this.handleItemMouseOver(p.index)}
onClick={() => this.selectAddress(p.suggestion)}
style={{ ...this.autocompleteItemStyle(p.active), ...defaultStyles.autocompleteItem }}>
- {p.suggestion}
+ {this.props.autocompleteItem({ suggestion: p.suggestion })}
))}
@@ -208,6 +206,7 @@ PlacesAutocomplete.propTypes = {
setAddress: React.PropTypes.func.isRequired,
placeholder: React.PropTypes.string,
hideLabel: React.PropTypes.bool,
+ autocompleteItem: React.PropTypes.func,
classNames: React.PropTypes.shape({
container: React.PropTypes.string,
label: React.PropTypes.string,
@@ -220,6 +219,7 @@ PlacesAutocomplete.defaultProps = {
placeholder: 'Address',
hideLabel: false,
classNames: {},
+ autocompleteItem: ({ suggestion }) => ({suggestion}
)
}
export default PlacesAutocomplete
diff --git a/src/tests/index.spec.js b/src/tests/index.spec.js
index 02852a72..cd6b5270 100644
--- a/src/tests/index.spec.js
+++ b/src/tests/index.spec.js
@@ -38,8 +38,9 @@ describe('PlacesAutocomplete props', () => {
describe('autocomplete dropdown', () => {
let wrapper;
+ const autocompleteItem = ({ suggestion }) => ({suggestion}
)
beforeEach(() => {
- wrapper = shallow( {}} />)
+ wrapper = shallow( {}} autocompleteItem={autocompleteItem} />)
})
it('initially does not have an autocomplete dropdown', () => {
@@ -69,7 +70,7 @@ describe('autocomplete dropdown', () => {
]
wrapper.setState({ autocompleteItems: data })
expect(wrapper.find('#PlacesAutocomplete__autocomplete-container')).to.have.length(1)
- expect(wrapper.find('.autocomplete__item')).to.have.length(3)
+ expect(wrapper.find('.autocomplete-item')).to.have.length(3)
})
})
@@ -121,6 +122,16 @@ describe('hideLabel prop', () => {
})
});
+describe('customizable autocompleteItem', () => {
+ it('lets you provide a custom autocomplete item', () => {
+ const autocompleteItem = ({ suggestion }) => (
)
+ const wrapper = shallow( {}} autocompleteItem={autocompleteItem}/>)
+ wrapper.setState({ autocompleteItems: [{ suggestion: 'San Francisco, CA', placeId: 1, active: false, index: 0 }] })
+ expect(wrapper.find('.my-autocomplete-item')).to.have.length(1)
+ expect(wrapper.find('.my-autocomplete-item')).to.contain( )
+ })
+})
+
// TODO: test geocodeByAddress function
describe('geocodeByAddress', () => {