[React] 세상 쉬운 리액트 모달 라이브러리

📒 너무나 쉬운 리액트 모달 라이브러리

---

• 저에게 딱 맞는 스타일의 모달 컴포넌트, 재사용하려고 라이브러리로 만들었습니다.
• 6개월 전 대충 만들다 말았던 코드 기반으로 구조 다시 짜느라 토할 뻔 했습니다.
• 다른 종속성 없이 react context를 이용해 만들었습니다.
• 모달 조작에 관련된 로직만 추상화하고, 스타일과 UI 렌더 관련 로직은 최대한 headless 하게 만들어 어느 프로젝트에서도 사용할 수 있도록 만들었습니다.
• 다중 모달 기능은 UX적으로 그닥이라 추가하지 않았습니다.
• 전체 적용 기본 스타일은 provider에게, 개별 적용할 스타일은 openModal() 함수에게.
• 진짜 쉽고 간편하니까 한번만 써주세요

📌 @lasbe/react-modal

@lasbe/react-modal

GitHub - LasBe-code/react-modal: 쉽고 간단한 React Modal 라이브러리

선언적으로 모달을 사용할 수 있는 패키지입니다.
구성과 디자인을 최대한 자유롭게 변경할 수 있습니다.
기본적으로 모달의 배경인 dimmer와 스크롤 방지 기능이 포함 되어 있습니다.

🔎 install

$ npm i @lasbe/react-modal

🔎 example

1. ModalProvider를 상위 컴포넌트에 감아줍니다.

root.render(
  <ModalProvider>
    <App />
  </ModalProvider>,
);

2. useModal() 훅을 이용해 모달을 여닫는 함수를 이용합니다.
   ModalStyle을 import 하여 기본 스타일을 사용할 수 있습니다.

import React from 'react';
import { useModal, ModalStyle } from '@lasbe/react-modal';

function App() {
  const { openModal, closeModal } = useModal();
  return (
    <button
      onClick={() =>
        openModal({
          content: (
            <>
              <ModalStyle.Header>
                <ModalStyle.Title>Header</ModalStyle.Title>
              </ModalStyle.Header>
              <ModalStyle.Body>Body</ModalStyle.Body>
              <ModalStyle.Footer>
                <ModalStyle.Button color="gray" onClick={closeModal}>
                  Close
                </ModalStyle.Button>
                <ModalStyle.Button onClick={closeModal}>Submit</ModalStyle.Button>
              </ModalStyle.Footer>
            </>
          ),
        })
      }
    >
      OPEN MODAL
    </button>
  );
}

export default App;

🔎 props

1. <ModalProvider />

type ModalProvidertype = {
  children: React.ReactElement;
  options?: {
    // 모달 배경 스타일 지정
    dimmer?: React.CSSProperties;
    // 모달 body 스타일 지정
    body?: React.CSSProperties;
    // 모달 여닫을 때 애니메이션 적용 여부
    useAnimation?: boolean;
  };
};

2. openModal()

type OpenModalType = {
  // Modal에 띄울 요소
  content: React.ReactNode;
  options?: {
    // 모달 배경 스타일 지정
    dimmer?: React.CSSProperties;
    // 모달 body 스타일 지정
    body?: React.CSSProperties;
    // 모달 여닫을 때 애니메이션 적용 여부
    useAnimation?: boolean;
  };
};