AddressSmartInput

Enhanced TextInput by Google Places AutoComplete service.

Note: When smartLocationInput is true (by default) keep in mind that country's state autocompletion for some countries may not match values between GeoNames and Google Places AutoComplete. That is because Google Places do not use ISO3166_2 standard for naming first level administrative areas. Nonetheless user can still manually select the state.

Note: When radius is provided, lat/lng props must be provided as well.

Note: Neighborhood field is only visible in Manual view and if countryCode is set to US or CA.

API

Note: fetched countries and country states are saved in session storage

Default usage

{

"country": "US",

}

<State initial={initialState}>
  {({ state, setState }) => {
    const fetchCountries = () =>
      fakeFetchCountries(state, updatedState => setState(updatedState))
    const fetchStates = countryCode =>
      fakeFetchStates(countryCode, state, loading => setState(loading))
    const fetchNeighborhoods = postalCode =>
      fakeFetchNeighborhoods(postalCode, loading => setState(loading))
    return (
      <>
        <AddressSmartInput
          handleChangeValue={(name, value) => setState({ value: value })}
          handleAddressState={value => setState({ value: value })}
          value={state.value}
          addressState={state.addressState}
          countries={state.countries}
          countriesLoading={state.countriesLoading}
          fetchCountries={fetchCountries}
          fetchNeighborhoods={fetchNeighborhoods}
          fetchStates={fetchStates}
          neighborhoods={state.neighborhoods}
          neighborhoodsLoading={state.neighborhoodsLoading}
          states={state.countryStates}
          statesLoading={state.statesLoading}
          label="Address"
          name="address"
          onChange={(name, addressState) => setState({ addressState })}
          handleAddressManualSubmit={(name, addressManualState) => {
            setState({ addressState: addressManualState })
          }}
        />
        <Divider />
        <Preview state={state.addressState} />
      </>
    )
  }}
</State><State initial={initialState}>
  {({ state, setState }) => {
    const fetchCountries = () =>
      fakeFetchCountries(state, updatedState => setState(updatedState))
    const fetchStates = countryCode =>
      fakeFetchStates(countryCode, state, loading => setState(loading))
    const fetchNeighborhoods = postalCode =>
      fakeFetchNeighborhoods(postalCode, loading => setState(loading))
    return (
      <>
        <AddressSmartInput
          handleChangeValue={(name, value) => setState({ value: value })}
          handleAddressState={value => setState({ value: value })}
          value={state.value}
          addressState={state.addressState}
          countries={state.countries}
          countriesLoading={state.countriesLoading}
          fetchCountries={fetchCountries}
          fetchNeighborhoods={fetchNeighborhoods}
          fetchStates={fetchStates}
          neighborhoods={state.neighborhoods}
          neighborhoodsLoading={state.neighborhoodsLoading}
          states={state.countryStates}
          statesLoading={state.statesLoading}
          label="Address"
          name="address"
          onChange={(name, addressState) => setState({ addressState })}
          handleAddressManualSubmit={(name, addressManualState) => {
            setState({ addressState: addressManualState })
          }}
        />
        <Divider />
        <Preview state={state.addressState} />
      </>
    )
  }}
</State>

Without `smartLocationInput`

{

"country": "US",

}

<State initial={initialState}>
  {({ state, setState }) => {
    const fetchCountries = () =>
      fakeFetchCountries(state, updatedState => setState(updatedState))
    const fetchStates = countryCode =>
      fakeFetchStates(countryCode, state, loading => setState(loading))
    const fetchNeighborhoods = postalCode =>
      fakeFetchNeighborhoods(postalCode, loading => setState(loading))
    return (
      <>
        <AddressSmartInput
          handleChangeValue={(name, value) => setState({ value: value })}
          handleAddressState={value => setState({ value: value })}
          value={state.value}
          smartLocationInput={false}
          addressState={state.addressState}
          countries={state.countries}
          countriesLoading={state.countriesLoading}
          fetchCountries={fetchCountries}
          fetchNeighborhoods={fetchNeighborhoods}
          fetchStates={fetchStates}
          neighborhoods={state.neighborhoods}
          neighborhoodsLoading={state.neighborhoodsLoading}
          states={state.countryStates}
          statesLoading={state.statesLoading}
          label="Address"
          name="address"
          onChange={(name, addressState) => setState({ addressState })}
          handleAddressManualSubmit={(name, addressManualState) => {
            setState({ addressState: addressManualState })
          }}
        />
        <Divider />
        <Preview state={state.addressState} />
      </>
    )
  }}
</State><State initial={initialState}>
  {({ state, setState }) => {
    const fetchCountries = () =>
      fakeFetchCountries(state, updatedState => setState(updatedState))
    const fetchStates = countryCode =>
      fakeFetchStates(countryCode, state, loading => setState(loading))
    const fetchNeighborhoods = postalCode =>
      fakeFetchNeighborhoods(postalCode, loading => setState(loading))
    return (
      <>
        <AddressSmartInput
          handleChangeValue={(name, value) => setState({ value: value })}
          handleAddressState={value => setState({ value: value })}
          value={state.value}
          smartLocationInput={false}
          addressState={state.addressState}
          countries={state.countries}
          countriesLoading={state.countriesLoading}
          fetchCountries={fetchCountries}
          fetchNeighborhoods={fetchNeighborhoods}
          fetchStates={fetchStates}
          neighborhoods={state.neighborhoods}
          neighborhoodsLoading={state.neighborhoodsLoading}
          states={state.countryStates}
          statesLoading={state.statesLoading}
          label="Address"
          name="address"
          onChange={(name, addressState) => setState({ addressState })}
          handleAddressManualSubmit={(name, addressManualState) => {
            setState({ addressState: addressManualState })
          }}
        />
        <Divider />
        <Preview state={state.addressState} />
      </>
    )
  }}
</State>

Results with provided `lat`, `lng` and restriction props

Coords are pointed to the center of Warsaw, Poland.

Default radius: 1000meters. You can change it by providing radius prop.

<State initial={initialState}>
  {({ state, setState }) => {
    const fetchCountries = () =>
      fakeFetchCountries(state, updatedState => setState(updatedState))
    const fetchStates = countryCode =>
      fakeFetchStates(countryCode, state, loading => setState(loading))
    const fetchNeighborhoods = postalCode =>
      fakeFetchNeighborhoods(postalCode, loading => setState(loading))
    return (
      <>
        <AddressSmartInput
          handleChangeValue={(name, value) => setState({ value: value })}
          handleAddressState={value => setState({ value: value })}
          value={state.value}
          strictResultsToUserCountry={false}
          addressState={state.addressState}
          countries={state.countries}
          countriesLoading={state.countriesLoading}
          fetchCountries={fetchCountries}
          fetchNeighborhoods={fetchNeighborhoods}
          fetchStates={fetchStates}
          neighborhoods={state.neighborhoods}
          neighborhoodsLoading={state.neighborhoodsLoading}
          states={state.countryStates}
          statesLoading={state.statesLoading}
          label="Address (without lat/lng, without strictResultsToUserCountry props)"
          name="address"
          onChange={(name, addressState) => setState({ addressState })}
          handleAddressManualSubmit={(name, addressManualState) => {
            setState({ addressState: addressManualState })
          }}
          defaultValue="Toledo"
        />
        <Divider />
        <AddressSmartInput
          handleChangeValue={(name, value) => setState({ value: value })}
          handleAddressState={value => setState({ value: value })}
          value={state.value}
          lat={52.229833}
          lng={21.011734}
          strictResultsToUserCountry={false}
          addressState={state.addressState}
          countries={state.countries}
          countriesLoading={state.countriesLoading}
          fetchCountries={fetchCountries}
          fetchNeighborhoods={fetchNeighborhoods}
          fetchStates={fetchStates}
          neighborhoods={state.neighborhoods}
          neighborhoodsLoading={state.neighborhoodsLoading}
          states={state.countryStates}
          statesLoading={state.statesLoading}
          label="Address (with lat/lng, without strictResultsToUserCountry props)"
          name="address"
          onChange={(name, addressState) => setState({ addressState })}
          handleAddressManualSubmit={(name, addressManualState) => {
            setState({ addressState: addressManualState })
          }}
          defaultValue="Toledo"
        />
        <Divider />
        <AddressSmartInput
          handleChangeValue={(name, value) => setState({ value: value })}
          handleAddressState={value => setState({ value: value })}
          value={state.value}
          strictResultsToUserCountry
          defaultCountryCode="PL"
          addressState={state.addressState}
          countries={state.countries}
          countriesLoading={state.countriesLoading}
          fetchCountries={fetchCountries}
          fetchNeighborhoods={fetchNeighborhoods}
          fetchStates={fetchStates}
          neighborhoods={state.neighborhoods}
          neighborhoodsLoading={state.neighborhoodsLoading}
          states={state.countryStates}
          statesLoading={state.statesLoading}
          label="Address (without lat/lng, with strictResultsToUserCountry props) (default)"
          name="address"
          onChange={(name, addressState) => setState({ addressState })}
          handleAddressManualSubmit={(name, addressManualState) => {
            setState({ addressState: addressManualState })
          }}
          defaultValue="Toledo"
        />
        <Divider />
        <AddressSmartInput
          handleChangeValue={(name, value) => setState({ value: value })}
          handleAddressState={value => setState({ value: value })}
          value={state.value}
          lat={52.229833}
          lng={21.011734}
          strictResultsToUserCountry
          defaultCountryCode="PL"
          addressState={state.addressState}
          countries={state.countries}
          countriesLoading={state.countriesLoading}
          fetchCountries={fetchCountries}
          fetchNeighborhoods={fetchNeighborhoods}
          fetchStates={fetchStates}
          neighborhoods={state.neighborhoods}
          neighborhoodsLoading={state.neighborhoodsLoading}
          states={state.countryStates}
          statesLoading={state.statesLoading}
          label="Address (with lat/lng, with strictResultsToUserCountry props) (recommended)"
          name="address"
          onChange={(name, addressState) => setState({ addressState })}
          handleAddressManualSubmit={(name, addressManualState) => {
            setState({ addressState: addressManualState })
          }}
          defaultValue="Toledo"
        />
      </>
    )
  }}
</State><State initial={initialState}>
  {({ state, setState }) => {
    const fetchCountries = () =>
      fakeFetchCountries(state, updatedState => setState(updatedState))
    const fetchStates = countryCode =>
      fakeFetchStates(countryCode, state, loading => setState(loading))
    const fetchNeighborhoods = postalCode =>
      fakeFetchNeighborhoods(postalCode, loading => setState(loading))
    return (
      <>
        <AddressSmartInput
          handleChangeValue={(name, value) => setState({ value: value })}
          handleAddressState={value => setState({ value: value })}
          value={state.value}
          strictResultsToUserCountry={false}
          addressState={state.addressState}
          countries={state.countries}
          countriesLoading={state.countriesLoading}
          fetchCountries={fetchCountries}
          fetchNeighborhoods={fetchNeighborhoods}
          fetchStates={fetchStates}
          neighborhoods={state.neighborhoods}
          neighborhoodsLoading={state.neighborhoodsLoading}
          states={state.countryStates}
          statesLoading={state.statesLoading}
          label="Address (without lat/lng, without strictResultsToUserCountry props)"
          name="address"
          onChange={(name, addressState) => setState({ addressState })}
          handleAddressManualSubmit={(name, addressManualState) => {
            setState({ addressState: addressManualState })
          }}
          defaultValue="Toledo"
        />
        <Divider />
        <AddressSmartInput
          handleChangeValue={(name, value) => setState({ value: value })}
          handleAddressState={value => setState({ value: value })}
          value={state.value}
          lat={52.229833}
          lng={21.011734}
          strictResultsToUserCountry={false}
          addressState={state.addressState}
          countries={state.countries}
          countriesLoading={state.countriesLoading}
          fetchCountries={fetchCountries}
          fetchNeighborhoods={fetchNeighborhoods}
          fetchStates={fetchStates}
          neighborhoods={state.neighborhoods}
          neighborhoodsLoading={state.neighborhoodsLoading}
          states={state.countryStates}
          statesLoading={state.statesLoading}
          label="Address (with lat/lng, without strictResultsToUserCountry props)"
          name="address"
          onChange={(name, addressState) => setState({ addressState })}
          handleAddressManualSubmit={(name, addressManualState) => {
            setState({ addressState: addressManualState })
          }}
          defaultValue="Toledo"
        />
        <Divider />
        <AddressSmartInput
          handleChangeValue={(name, value) => setState({ value: value })}
          handleAddressState={value => setState({ value: value })}
          value={state.value}
          strictResultsToUserCountry
          defaultCountryCode="PL"
          addressState={state.addressState}
          countries={state.countries}
          countriesLoading={state.countriesLoading}
          fetchCountries={fetchCountries}
          fetchNeighborhoods={fetchNeighborhoods}
          fetchStates={fetchStates}
          neighborhoods={state.neighborhoods}
          neighborhoodsLoading={state.neighborhoodsLoading}
          states={state.countryStates}
          statesLoading={state.statesLoading}
          label="Address (without lat/lng, with strictResultsToUserCountry props) (default)"
          name="address"
          onChange={(name, addressState) => setState({ addressState })}
          handleAddressManualSubmit={(name, addressManualState) => {
            setState({ addressState: addressManualState })
          }}
          defaultValue="Toledo"
        />
        <Divider />
        <AddressSmartInput
          handleChangeValue={(name, value) => setState({ value: value })}
          handleAddressState={value => setState({ value: value })}
          value={state.value}
          lat={52.229833}
          lng={21.011734}
          strictResultsToUserCountry
          defaultCountryCode="PL"
          addressState={state.addressState}
          countries={state.countries}
          countriesLoading={state.countriesLoading}
          fetchCountries={fetchCountries}
          fetchNeighborhoods={fetchNeighborhoods}
          fetchStates={fetchStates}
          neighborhoods={state.neighborhoods}
          neighborhoodsLoading={state.neighborhoodsLoading}
          states={state.countryStates}
          statesLoading={state.statesLoading}
          label="Address (with lat/lng, with strictResultsToUserCountry props) (recommended)"
          name="address"
          onChange={(name, addressState) => setState({ addressState })}
          handleAddressManualSubmit={(name, addressManualState) => {
            setState({ addressState: addressManualState })
          }}
          defaultValue="Toledo"
        />
      </>
    )
  }}
</State>

Manipulating value

{

"country": "US",

}

<State initial={initialState}>
  {({ state, setState }) => {
    return (
      <>
        <AddressSmartInput
          handleChangeValue={(name, value) => setState({ value: value })}
          handleAddressState={value => setState({ value: value })}
          value={state.value}
          addressState={state.addressState}
          label="Address"
          name="address"
          onChange={(name, addressState) => setState({ addressState })}
          handleAddressManualSubmit={(name, addressManualState) => {
            setState({ addressState: addressManualState })
          }}
        />
        <Button
          className="mt-2"
          onClick={() => setState({ value: 'Whatever you want' })}
        >
          Change Value
        </Button>
        <Divider />
        <Preview state={state.addressState} />
      </>
    )
  }}
</State><State initial={initialState}>
  {({ state, setState }) => {
    return (
      <>
        <AddressSmartInput
          handleChangeValue={(name, value) => setState({ value: value })}
          handleAddressState={value => setState({ value: value })}
          value={state.value}
          addressState={state.addressState}
          label="Address"
          name="address"
          onChange={(name, addressState) => setState({ addressState })}
          handleAddressManualSubmit={(name, addressManualState) => {
            setState({ addressState: addressManualState })
          }}
        />
        <Button
          className="mt-2"
          onClick={() => setState({ value: 'Whatever you want' })}
        >
          Change Value
        </Button>
        <Divider />
        <Preview state={state.addressState} />
      </>
    )
  }}
</State>

With default value

Default value must be at least 2 characters long to trigger Google Places search.

{

"address": "keller-williams",

"country": "US",

}

<State initial={initialStateWithAddress}>
  {({ state, setState }) => {
    const fetchCountries = () =>
      fakeFetchCountries(state, updatedState => setState(updatedState))
    const fetchStates = countryCode =>
      fakeFetchStates(countryCode, state, loading => setState(loading))
    const fetchNeighborhoods = postalCode =>
      fakeFetchNeighborhoods(postalCode, loading => setState(loading))
    return (
      <>
        <AddressSmartInput
          handleChangeValue={(name, value) => setState({ value: value })}
          handleAddressState={value => setState({ value: value })}
          value={state.value}
          addressState={state.addressState}
          countries={state.countries}
          countriesLoading={state.countriesLoading}
          fetchCountries={fetchCountries}
          fetchNeighborhoods={fetchNeighborhoods}
          fetchStates={fetchStates}
          neighborhoods={state.neighborhoods}
          neighborhoodsLoading={state.neighborhoodsLoading}
          states={state.countryStates}
          statesLoading={state.statesLoading}
          label="Address"
          name="address"
          onChange={(name, addressState) => setState({ addressState })}
          handleAddressManualSubmit={(name, addressManualState) => {
            setState({ addressState: addressManualState })
          }}
          defaultValue={state.addressState.address}
        />
        <Divider />
        <Preview state={state.addressState} />
      </>
    )
  }}
</State><State initial={initialStateWithAddress}>
  {({ state, setState }) => {
    const fetchCountries = () =>
      fakeFetchCountries(state, updatedState => setState(updatedState))
    const fetchStates = countryCode =>
      fakeFetchStates(countryCode, state, loading => setState(loading))
    const fetchNeighborhoods = postalCode =>
      fakeFetchNeighborhoods(postalCode, loading => setState(loading))
    return (
      <>
        <AddressSmartInput
          handleChangeValue={(name, value) => setState({ value: value })}
          handleAddressState={value => setState({ value: value })}
          value={state.value}
          addressState={state.addressState}
          countries={state.countries}
          countriesLoading={state.countriesLoading}
          fetchCountries={fetchCountries}
          fetchNeighborhoods={fetchNeighborhoods}
          fetchStates={fetchStates}
          neighborhoods={state.neighborhoods}
          neighborhoodsLoading={state.neighborhoodsLoading}
          states={state.countryStates}
          statesLoading={state.statesLoading}
          label="Address"
          name="address"
          onChange={(name, addressState) => setState({ addressState })}
          handleAddressManualSubmit={(name, addressManualState) => {
            setState({ addressState: addressManualState })
          }}
          defaultValue={state.addressState.address}
        />
        <Divider />
        <Preview state={state.addressState} />
      </>
    )
  }}
</State>

With custom `onPlaceClick`

Open browser DevTools to see the clicked result object.

{

"country": "US",

}

<State initial={initialState}>
  {({ state, setState }) => {
    const fetchCountries = () =>
      fakeFetchCountries(state, updatedState => setState(updatedState))
    const fetchStates = countryCode =>
      fakeFetchStates(countryCode, state, loading => setState(loading))
    const fetchNeighborhoods = postalCode =>
      fakeFetchNeighborhoods(postalCode, loading => setState(loading))
    return (
      <>
        <AddressSmartInput
          handleChangeValue={(name, value) => setState({ value: value })}
          handleAddressState={value => setState({ value: value })}
          value={state.value}
          addressState={state.addressState}
          countries={state.countries}
          countriesLoading={state.countriesLoading}
          fetchCountries={fetchCountries}
          fetchNeighborhoods={fetchNeighborhoods}
          fetchStates={fetchStates}
          neighborhoods={state.neighborhoods}
          neighborhoodsLoading={state.neighborhoodsLoading}
          states={state.countryStates}
          statesLoading={state.statesLoading}
          label="Address"
          name="address"
          onPlaceClick={(name, place) => console.log(place)}
          onChange={(name, addressState) => setState({ addressState })}
          defaultValue="keller-williams"
          handleAddressManualSubmit={(name, addressManualState) => {
            setState({ addressState: addressManualState })
          }}
        />
        <Divider />
        <Preview state={state.addressState} />
      </>
    )
  }}
</State><State initial={initialState}>
  {({ state, setState }) => {
    const fetchCountries = () =>
      fakeFetchCountries(state, updatedState => setState(updatedState))
    const fetchStates = countryCode =>
      fakeFetchStates(countryCode, state, loading => setState(loading))
    const fetchNeighborhoods = postalCode =>
      fakeFetchNeighborhoods(postalCode, loading => setState(loading))
    return (
      <>
        <AddressSmartInput
          handleChangeValue={(name, value) => setState({ value: value })}
          handleAddressState={value => setState({ value: value })}
          value={state.value}
          addressState={state.addressState}
          countries={state.countries}
          countriesLoading={state.countriesLoading}
          fetchCountries={fetchCountries}
          fetchNeighborhoods={fetchNeighborhoods}
          fetchStates={fetchStates}
          neighborhoods={state.neighborhoods}
          neighborhoodsLoading={state.neighborhoodsLoading}
          states={state.countryStates}
          statesLoading={state.statesLoading}
          label="Address"
          name="address"
          onPlaceClick={(name, place) => console.log(place)}
          onChange={(name, addressState) => setState({ addressState })}
          defaultValue="keller-williams"
          handleAddressManualSubmit={(name, addressManualState) => {
            setState({ addressState: addressManualState })
          }}
        />
        <Divider />
        <Preview state={state.addressState} />
      </>
    )
  }}
</State>

With regions filtering

Types supported in place autocomplete requests

<State initial={initialState}>
  {({ state, setState }) => {
    const fetchCountries = () =>
      fakeFetchCountries(state, updatedState => setState(updatedState))
    const fetchStates = countryCode =>
      fakeFetchStates(countryCode, state, loading => setState(loading))
    const fetchNeighborhoods = postalCode =>
      fakeFetchNeighborhoods(postalCode, loading => setState(loading))
    return (
      <>
        <AddressSmartInput
          handleChangeValue={(name, value) => setState({ value: value })}
          handleAddressState={value => setState({ value: value })}
          value={state.value}
          strictResultsToRegion
          strictResultsToUserCountry
          addressState={state.addressState}
          countries={state.countries}
          countriesLoading={state.countriesLoading}
          fetchCountries={fetchCountries}
          fetchNeighborhoods={fetchNeighborhoods}
          fetchStates={fetchStates}
          neighborhoods={state.neighborhoods}
          neighborhoodsLoading={state.neighborhoodsLoading}
          states={state.countryStates}
          statesLoading={state.statesLoading}
          label="Address (postal codes with country selected as US)"
          name="address"
          onChange={(name, addressState) => setState({ addressState })}
          handleAddressManualSubmit={(name, addressManualState) => {
            setState({ addressState: addressManualState })
          }}
          defaultValue="00"
        />
        <Divider />
        <AddressSmartInput
          handleChangeValue={(name, value) => setState({ value: value })}
          handleAddressState={value => setState({ value: value })}
          value={state.value}
          strictResultsToRegion
          strictResultsToUserCountry
          defaultCountryCode="PL"
          addressState={state.addressState}
          countries={state.countries}
          countriesLoading={state.countriesLoading}
          fetchCountries={fetchCountries}
          fetchNeighborhoods={fetchNeighborhoods}
          fetchStates={fetchStates}
          neighborhoods={state.neighborhoods}
          neighborhoodsLoading={state.neighborhoodsLoading}
          states={state.countryStates}
          statesLoading={state.statesLoading}
          label="Address (postal codes with country selected as PL)"
          name="address"
          onChange={(name, addressState) => setState({ addressState })}
          handleAddressManualSubmit={(name, addressManualState) => {
            setState({ addressState: addressManualState })
          }}
          defaultValue="00"
        />
      </>
    )
  }}
</State><State initial={initialState}>
  {({ state, setState }) => {
    const fetchCountries = () =>
      fakeFetchCountries(state, updatedState => setState(updatedState))
    const fetchStates = countryCode =>
      fakeFetchStates(countryCode, state, loading => setState(loading))
    const fetchNeighborhoods = postalCode =>
      fakeFetchNeighborhoods(postalCode, loading => setState(loading))
    return (
      <>
        <AddressSmartInput
          handleChangeValue={(name, value) => setState({ value: value })}
          handleAddressState={value => setState({ value: value })}
          value={state.value}
          strictResultsToRegion
          strictResultsToUserCountry
          addressState={state.addressState}
          countries={state.countries}
          countriesLoading={state.countriesLoading}
          fetchCountries={fetchCountries}
          fetchNeighborhoods={fetchNeighborhoods}
          fetchStates={fetchStates}
          neighborhoods={state.neighborhoods}
          neighborhoodsLoading={state.neighborhoodsLoading}
          states={state.countryStates}
          statesLoading={state.statesLoading}
          label="Address (postal codes with country selected as US)"
          name="address"
          onChange={(name, addressState) => setState({ addressState })}
          handleAddressManualSubmit={(name, addressManualState) => {
            setState({ addressState: addressManualState })
          }}
          defaultValue="00"
        />
        <Divider />
        <AddressSmartInput
          handleChangeValue={(name, value) => setState({ value: value })}
          handleAddressState={value => setState({ value: value })}
          value={state.value}
          strictResultsToRegion
          strictResultsToUserCountry
          defaultCountryCode="PL"
          addressState={state.addressState}
          countries={state.countries}
          countriesLoading={state.countriesLoading}
          fetchCountries={fetchCountries}
          fetchNeighborhoods={fetchNeighborhoods}
          fetchStates={fetchStates}
          neighborhoods={state.neighborhoods}
          neighborhoodsLoading={state.neighborhoodsLoading}
          states={state.countryStates}
          statesLoading={state.statesLoading}
          label="Address (postal codes with country selected as PL)"
          name="address"
          onChange={(name, addressState) => setState({ addressState })}
          handleAddressManualSubmit={(name, addressManualState) => {
            setState({ addressState: addressManualState })
          }}
          defaultValue="00"
        />
      </>
    )
  }}
</State>

Manual address input

On submit overrides current address.

State is required if country is big enough to have states. For example United States will have state field as required while Antarctica won't.

<State initial={initialState}>
  {({ state, setState }) => {
    const fetchCountries = () =>
      fakeFetchCountries(state, updatedState => setState(updatedState))
    const fetchStates = countryCode =>
      fakeFetchStates(countryCode, state, loading => setState(loading))
    const fetchNeighborhoods = postalCode =>
      fakeFetchNeighborhoods(postalCode, loading => setState(loading))
    return (
      <>
        <AddressSmartInput
          handleChangeValue={(name, value) => setState({ value: value })}
          handleAddressState={value => setState({ value: value })}
          value={state.value}
          addressState={state.addressState}
          countries={state.countries}
          countriesLoading={state.countriesLoading}
          fetchCountries={fetchCountries}
          fetchNeighborhoods={fetchNeighborhoods}
          fetchStates={fetchStates}
          neighborhoods={state.neighborhoods}
          neighborhoodsLoading={state.neighborhoodsLoading}
          states={state.countryStates}
          statesLoading={state.statesLoading}
          label="Address"
          name="address"
          onChange={(name, addressState) => setState({ addressState })}
          handleAddressManualSubmit={(name, addressManualState) => {
            setState({ addressState: addressManualState })
          }}
          defaultValue="foo-bar-baz"
        />
      </>
    )
  }}
</State><State initial={initialState}>
  {({ state, setState }) => {
    const fetchCountries = () =>
      fakeFetchCountries(state, updatedState => setState(updatedState))
    const fetchStates = countryCode =>
      fakeFetchStates(countryCode, state, loading => setState(loading))
    const fetchNeighborhoods = postalCode =>
      fakeFetchNeighborhoods(postalCode, loading => setState(loading))
    return (
      <>
        <AddressSmartInput
          handleChangeValue={(name, value) => setState({ value: value })}
          handleAddressState={value => setState({ value: value })}
          value={state.value}
          addressState={state.addressState}
          countries={state.countries}
          countriesLoading={state.countriesLoading}
          fetchCountries={fetchCountries}
          fetchNeighborhoods={fetchNeighborhoods}
          fetchStates={fetchStates}
          neighborhoods={state.neighborhoods}
          neighborhoodsLoading={state.neighborhoodsLoading}
          states={state.countryStates}
          statesLoading={state.statesLoading}
          label="Address"
          name="address"
          onChange={(name, addressState) => setState({ addressState })}
          handleAddressManualSubmit={(name, addressManualState) => {
            setState({ addressState: addressManualState })
          }}
          defaultValue="foo-bar-baz"
        />
      </>
    )
  }}
</State>

AddressSmartInput

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}API

API