React-simple-address NPM

react-simple-address

react-simple-address document

Get Started

yarn add react-simple-address

npm i react-simple-address

Example

cd example && yarn && yarn start

Basic Usage

import withSimpleAddress from 'react-simple-address'

Create your SimpleAddres component

const MySimpleAddres = ({
  // select city value
  selectedCity,
  // select dist value
  selectedDist,
  // postal code value
  selectedPostalCode,
  // use to render select city options
  cities,
  // use to render select dist options
  dists,
  // set new value while city change
  handleCityChange,
  // set new value while dist change
  handleDistChange,
  // set new value while postal code change
  handlePostalCodeChange,
}) => (
  ...
)

Semantic-ui-react for example.

  <Dropdown
    selection
    onChange={(e, { value }) => { handleCityChange(value) }}
    value={selectedCity}
    placeholder="選擇縣市"
    options={_map(cities, city => ({
      key: city,
      text: city,
      value: city,
    }))}
  />
  <Dropdown
    selection
    onChange={(e, { value }) => { handleDistChange(value) }}
    value={selectedDist}
    placeholder="選擇地區"
    options={_map(dists, dist => ({
      key: dist.name,
      text: dist.name,
      value: dist.name,
    }))}
  />
  <Input
    value={selectedPostalCode}
    onChange={(e, { value }) => { handlePostalCodeChange(value) }}
  />

export default withSimpleAddress()(MySimpleAddres)

Now you can import it anywhere.

<MySimpleAddres defaultCity='臺北市' defaultDist='中正區' defaultPostalCode='10000'/>

configs

You can replace default data with following schema.

withSimpleAddress({
  data: [{
    city: '基隆市',
    dists: [
      {
        name: '仁愛區',
        postalCode: '200',
      },
    ],
  },
  ...
  ]
})(MySimpleAddres)