/woowacourse-scent-modal

우테코 페이먼츠 미션 step3 모달 패키지

Primary LanguageTypeScriptMIT LicenseMIT

ScentModal 모달 라이브러리

context api를 사용해 간단한 모달을 구현할 수 있는 라이브러리 입니다.


설치 방법

npm install @kyw0716/woowacourse-scent-modal

구성

  • ModalProvider
  • useModalStateContext
  • useModalActionContext
  • BottomSheet

사용 방법


ModalProvider 사용하기

import { ModalProvider } from '@kyw0716/woowacourse-scent-modal';

function App() {
  return (
    <ModalProvider>
      <UsingModalComponent />
    </ModalProvider>
  );
}

BottomSheet 템플릿 불러오기

import { BottomSheet } from '@kyw0716/woowacourse-scent-modal';

context 사용하기

function UsingModalComponent() {
  const { isOpen } = useModalStateContext();
  const { openModal } = useModalActionContext();

  return (
    <>
      {isOpen && <BottomSheet>모달</BottomSheet>}
      <button onClick={openModal}>모달 열기</button>
    </>
  );
}