JSPM – dotoli-popup@1.0.1

Package Exports

dotoli-popup

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (dotoli-popup) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🥳 화면이 꽉찬 Modal / Popup을 좀 더 편하고 깔끔하게 쓰고 싶어 만든 라이브러리

예시는 example 폴더를 확인 부탁드립니다.

Install Guide

npm install dotoli-popup
# OR
yarn add dotoli-popup

Getting Started

The Gist

import { render } from 'react-dom';
import popup, { PopupContainer } from 'dotoli-popup';
import Popup from './Popup';  // React Component

const App = () => {
  const onClick = () => {
    // Popup Open 
    popup.open({
      id: 'popup',
      render: Popup,
      props: {
        header: 'Lorem ipsum',
        onCloseClick: () => {
          // Popup Close
          popup.close('popup');
        },
      },
      onClose: () => console.log('On Close Event'),
      backgroundCloseable: true,
      onOpen: () => console.log('On Open Event'),
    });
  };

  return (
    <div>
      <PopupContainer />
      <button onClick={onClick}>Open modal</button>
    </div>
  );
};

render(<App />, document.getElementById('root'));

Use NextJS

// pages/_app.tsx or pages/_app.js
import { AppProps } from 'next/app';
import { PopupContainer } from 'dotoli-popup';

const App = ({ Component, pageProps }: AppProps) => (
  <>
    <PopupContainer />
    <Component {...pageProps} />
  </>
);

export default App;

popup.open Props

key	required	default	description
id	✅		팝업 ID로 종료 및 popup 구분에 쓰임
render	✅		팝업 Component
props			팝업 Component 의 Props
onClose			팝업 종료 시 실행 이벤트
onOpen			팝업 오픈 시 실행 이벤트
backgroundClosealbe		false	팝업 Component 밖의 영역 클릭 시 종료 여부

dotoli-popup