@kyw0716/woowacourse-scent-modal v0.0.6

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>
    </>
  );
}