@actbase/react-daum-postcode

@actbase/react-daum-postcode

다음 우편번호 검색을 React, React-Native 에서 쉽게 사용할 수 있도록 만든 플러그인입니다.
상세 사용방법은 아래 URL을 참고하세요.

https://github.com/daumPostcode/QnA
https://spi.maps.daum.net/postcode/guidessl

설치하기

npm install @actbase/react-daum-postcode

or

yarn add @actbase/react-daum-postcode

React-Native를 사용 시 추가적으로 설치해주세요.

우편번호 찾는 페이지 자체는 Webview를 통해 실행되도록 되어있습니다.
react-native-webview를 설치해야 합니다.

npm install react-native-webview
npx pod-install

---

사용하기

import Postcode from '@actbase/react-daum-postcode';

const YourView = () => (
  <Postcode
    style={{ width: 320, height: 320 }}
    jsOptions={{ animation: true }}
    onSelected={data => alert(JSON.stringify(data))}
  />
);

팝업으로 사용할땐 아래와 같이 사용해도 됩니다.

import Postcode from '@actbase/react-daum-postcode';
...

const YourView = () => {
  const [isModal, setModal] = useState(false);
  return (
    <>
      <Modal isVisible={isModal}>
        <Postcode
          style={{ width: 320, height: 320 }}
          jsOptions={{ animation: true, hideMapBtn: true }}
          onSelected={data => {
            alert(JSON.stringify(data));
            setModal(false);
          }}
        />
      </Modal>
      <Button onClick={() => setModal(true)}>주소찾기</Button>
    </>
  );
}

---

속성

jsOptions?: JSOptions

다음 우편번호찾기 속성을 넣습니다.

아래 URL을 참고해주세요.
https://spi.maps.daum.net/postcode/guidessl#attributes

onSelected: (data: OnCompleteParams) => void

다음우편번호찾기 결과 값을 수신합니다.

oncomplete의 항목을 참고해주세요.
https://spi.maps.daum.net/postcode/guidessl#attributes

style: ({width, height})

width, height값을 별도로 줄 수 있습니다.

Contacts

해당 모듈은 액트베이스(유)에서 개발 및 관리를 진행하고 있습니다.
프로젝트 문의 혹은 제휴가 필요한 경우 [e-mail]로 연락주세요.

Changes

• 1.0.2
  • 웹버전에서 onSelected 장애 처리
• 1.0.1
  • 액트베이스(유) 오픈소스 기준에 맞춰서 수정
• 1.0.0
  • 콘솔제거
• 0.9.8
  • onClose 이벤트 제거
  • 웹에서 가끔 하단에 툭 튀어나오는 장애 처리
• 0.9.6
  • onClose 이벤트 추가
• 0.9.4
  • 아싸리 그냥 FlexStyle속성을 다 밀어넣어버립시다..
• 0.9.3
  • 속성에 flex 추가. Thanks @miraten
• 0.9.2
  • RN 에서 검색 다음페이지 갈 경우 위로 스크롤 올려줌
  • 지도보기 등 외부 링크를 누를경우 브라우저로 이동
• 0.9.0
  • 첫 배포