@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={{ animated: 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={{ animated: 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

• 0.9.0
  • 첫 배포