Dotoli-Popup Guide

🥳 화면이 꽉찬 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 밖의 영역 클릭 시 종료 여부