Zipcode-tw-react NPM

zipcode-tw-react

提供台灣縣市、行政區下拉選單以及郵遞區號輸入欄位組合的React Component
藉由RawData快速進行郵遞區號切換，並提供地址合併顯示。

npm install zipcode-tw-react --save

or use package.json

"dependencies": {
      ...
    + "zipcode-tw-react": "^1.2.0",
 },

import {ZipCodeTW} from "zipcode-tw-react";

<ZipCodeTW displayType="text"
          ...
/>

Name	Type	Default	Description
displayType	one of: 'text', 'display'	'text'	displayType= display1. 以span顯示且包含readOnly & disabled屬性2. 提供fullAddress、address參數合併顯示郵遞區號及地址
countySort	object	{"基隆市": 1, "台北市":2, "新北市":3, "桃園市":4, "新竹市":5, "新竹縣":6, "苗栗縣":7, "台中市":8, "彰化縣":9, "南投縣":10,"雲林縣":11, "嘉義市":12, "嘉義縣":13, "台南市":14, "高雄市":15, "屏東縣":16, "台東縣":17, "花蓮縣":18, "宜蘭縣":19, "澎湖縣":20,"金門縣":21, "連江縣":22}
zipCodePositionLast	bool	true	Decide zipCode input text position, when displayType= display, position is fixed
countyFieldName	string	'county'
countyValue	string
districtFieldName	string	'district'
districtValue	string
zipCodeFieldName	string	'zipCode'
zipCodeValue	string
countyClass	string	'form-control'
countyStyle	object	{}
districtClass	string	'form-control'
districtStyle	object	displayType= 'text'預設為 {marginLeft:'5px', minWidth:'107px', paddingRight:'0px'}
zipClass	string	'form-control'
zipStyle	object	displayType= 'text'預設為 {marginLeft:'5px', width: '50px'}
zipCodePlaceholder	string
fullAddress	string		完整地址(優化顯示)
address	string		路段地址資訊(優化顯示)
addressClass	string	'form-control'
addressStyle	object	{}

Name	Return	Description
handleChangeCounty	{ countyFieldName, countyValue, districtFieldName, districtValue, zipFieldName, zipValue }
handleChangeDistrict	{ countyFieldName, countyValue, districtFieldName, districtValue, zipFieldName, zipValue }
handleChangeZipCode	{ zipFieldName, zipValue }
handleBlurZipCode	{ countyFieldName, countyValue, districtFieldName, districtValue, zipFieldName, zipValue }
handleZipCodeNotExists	{ countyFieldName, countyValue, districtFieldName, districtValue, zipFieldName, zipValue, origZipCode }