npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@mj-studio/react-native-daum-postcode

v2.0.1

Published

다음 우편번호찾기 for React, React-Native

Downloads

15

Readme

@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

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

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
    • 첫 배포