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>
  )
}