Migration Guide (From v6.x to v7.x)

Migration Guide from version 6 to 7

Version 7 release includes major API changes to enhance customizability in rendering. We made this change to let you have the full control over the rendering of the UI.

If you had a component like this with version 6.

render() {
  const inputProps = {
    value: this.state.address,
    onChange: this.handleChange,
    placeholder: 'Search Places...',
  };

  const renderSuggesion = ({ suggestion }) => <div>{suggestion}</div>

  return (
    <PlacesAutocomplete
      inputProps={inputProps}
      renderSuggestion={renderSuggestion}
    />
  );
}

With version 7 you can rewrite it to something like this.

render() {
  return (
    <PlacesAutocomplete value={this.state.address} onChange={this.handleChange}>
     {({ getInputProps, suggestions, getSuggestionItemProps }) => (
       <div>
         <input {...getInputProps({ placeholder: 'Search Places...'})} />
         <div>
           {suggestions.map(suggestion => (
              <div {...getSuggestionItemProps(suggestion)}>
               {suggestion.description}
              </div>
           )}
         <div>
       </div>
     )}
    </PlacesAutocomplete>
  )
}