@actbase/react-daum-postcode
TypeScript icon, indicating that this package has built-in type declarations

1.0.4 • Public • Published

@actbase/react-daum-postcode

platforms npm npm github issues github closed issues Issue Stats

다음 우편번호 검색을 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

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

Changes

  • 1.0.4
    • 웹버전에서 width 500 해제
  • 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
    • 첫 배포

Package Sidebar

Install

npm i @actbase/react-daum-postcode

Weekly Downloads

839

Version

1.0.4

License

MIT

Unpacked Size

36.7 kB

Total Files

17

Last publish

Collaborators

  • solari3t2
  • seung-juv
  • lunyx
  • alexkang