Material-ui-address-input NPM

material-ui-address-input

This component is an address picker component for Material-UI.

Demo

Installation

npm install --save material-ui-address-input

Note: material-ui-address-input only supports Material-UI 1.0.0 or later. There is not planned support for Material-UI 0.x. If you are using an earlier version of Material-UI, you should consider upgrading to v1.

Usage

The component only supports controlled input at the moment.

import React, {Component} from 'react'
import AddressInput from 'material-ui-address-input'

class ControlledAddressInput extends Component {
    constructor (props) {
        super(props)
        this.state = {
            address: '',
            addresses: []
        }
    }

    handleAddAddress = address => {
        this.setState({
            addresses: [...this.state.addresses, address]
        })
    }

    handleChangeAddress = addressIndex => {
        this.setState({
            address: addressIndex
        })
    }

    render () {
        return (
            <AddressInput
                onAdd={this.handleAddAddress}
                onChange={this.handleChangeAddress}
                value={this.state.address}
                allAddresses={this.state.addresses}
            />
        )
    }
}

export default ControlledAddressInput

Props

Name	Type	Default	Description
`addressLabels`	`shape`	`{ houseNameNumber: 'House Name/Number', addressLine1: 'Address Line 1', addressLine2: 'Address Line 2', city: 'City', region: 'State/Province/Region', zip: 'ZIP/Postal Code', country: 'Country' }`	Custom labels to display when the user creates a new address. Note that if you wish to use custom labels you must specify each of the labels.
`addressResolver`	`func`		If specified, the component will offer the user a choice to find their address automatically given their house name/number and zip/postal code (and their country if `displayCountry` is set to `true`). When the user types in this information and clicks 'Find Address', this function will be called. This function should add the resolved address and change the value of this component to correctly input the new address. Signature: `function(houseNameNumber: string, zip: string, country: string) => void`
`allAddresses`*	`array`		Array containing all of the `address` objects that the user can choose from. Addresses should be of the form {addressLine1: string, addressLine2: string, city: string, region: string, zip: string, country: string}
`disabled`	`bool`	`false`	If `true`, the label, input and helper text should be displayed in a disabled state.
`displayCountry`	`bool`	`true`	Whether the address selector should allow users to choose their country. Often disabled if your application typically has users from a single country.
`error`	`bool`		If `true` the address dropdown will be in an error state and appear red.
`helperText`	`node`		The helper text content
`id`	`string`	`'address'`	The `id` to be passed to the select element.
`label`	`string`	`'Address'`	The label to be shown on the address picker component.
`margin`	`enum: 'none' \| 'dense' \| 'normal'`	`'none'`	If `dense` or `normal`, will adjust vertical spacing of this component.
`name`	`string`	`'address'`	The `name` to be passed to the select element.
`native`	`bool`	`false`	If `true`, a native `<select>` element will be rendered.
`onAdd`*	`func`		Callback that is fired when the user adds a new address. This function should add the new address to the `allAddresses` prop. The function is called with a single parameter `address` with the following shape: `address: {addressLine1: string, addressLine2: string, city: string, region: string, zip: string, country: string}`
`onChange`*	`func`		Callback that is fired when the user changes the active address using the dropdown box. There is a single parameter `addressIndex` which represents the index in the array of all addresses that the selected address represents.
`required`	`bool`	`false`	If `true`, the label will indicate that the user must select an address from this component. Note that HTML5 validations for this feature only work with `native` set to `true`.
`value`*	`union: string \| number`		The index of the selected address in the array of all addresses. If you desire 'no address selected', then `value` should be the empty string `''`.