ventileco-modal

작은 API로 모달 열림/닫힘 상태를 관리하는 유틸리티입니다.
플랫폼별 진입점은 아래와 같습니다.

• Core: ventileco-modal
• React: ventileco-modal/react
• Vue: ventileco-modal/vue

Install

npm i ventileco-modal

Core (Vanilla JS/TS)

bindModal(modalId, element)는 모달 상태를 구독해서 대상 DOM의 display를 자동 동기화합니다.

import { bindModal } from 'ventileco-modal'

const modal = document.getElementById('my-modal')!
const cleanup = bindModal('myModal', modal)

// cleanup() 호출 시 구독 해제

열고/닫는 액션은 프레임워크 훅(react, vue)으로 제어하거나, 필요하면 내부 매니저를 직접 확장해서 사용하세요.

React

useModal(modalId)는 isOpen, open, close를 제공합니다.

import { useModal } from 'ventileco-modal/react'

export function SampleModal() {
  const { isOpen, open, close } = useModal('sampleModal')

  const { open: openNested } = useModal('nestedModal')

  return (
    <>
      <button onClick={open}>열기</button>

      {isOpen && (
        <div onClick={close}>
          <div onClick={(e) => e.stopPropagation()}>
            <h3>Sample Modal</h3>
            <button onClick={openNested}>중첩 모달 열기</button>
            <button onClick={close}>닫기</button>
          </div>
        </div>
      )}
    </>
  )
}

Vue

useModal(modalId)는 readonly isOpen ref와 open, close를 제공합니다.

<script setup lang="ts">
import { useModal } from 'ventileco-modal/vue'

const { isOpen, open, close } = useModal('sampleModal')
</script>

<template>
  <button @click="open">열기</button>

  <div v-if="isOpen" @click="close">
    <div @click.stop>
      <h3>Sample Modal</h3>
      <button @click="close">닫기</button>
    </div>
  </div>
</template>

Notes

• 동일한 modalId를 여러 번 open해도 스택에 중복 추가되지 않습니다.
• React/Vue에서 같은 modalId를 사용하면 같은 상태를 공유합니다.