material-ui-address-input

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

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 ''. |

Contributing

PRs are welcome! :tada: