@slithy/modal-core

@slithy/modal-core

The modal store. No React components, no animation, no UI.

modal-core owns the state machine and is the source of truth for which modals are open. All other modal packages depend on it. Consuming apps interact with it directly to open and close modals.

Installation

pnpm add @slithy/modal-core

Opening and Closing

All store methods are available via useModalStore.getState() for use outside React, or via the hook for reactive access.

import { useModalStore } from '@slithy/modal-core'

// Open a modal — pass any ReactNode
const id = useModalStore.getState().openModal(<MyModal />, {
  triggerEvent: event,   // enables keyboard-triggered focus return on close
})

// Close
useModalStore.getState().closeModal()        // topmost modal
useModalStore.getState().closeModal(id)      // specific modal
useModalStore.getState().closeAllModals()    // all modals

openModal options

Option	Type	Description
id	string	Stable ID; reuses the slot if already open
triggerEvent	ModalTriggerEvent	Enables focus return to the triggering element
triggerElement	Element	Explicit element to focus on close
skipAnimation	boolean	Skip enter/leave animation
closeModals	string[]	Close specific modals before opening this one

Reactive Access

import { useModalStore } from '@slithy/modal-core'

// Re-renders when modals change
const modals = useModalStore(s => s.modals)
const isAnyOpen = useModalStore(s => s.modals.length > 0)

// One-time read or in event handlers
const isOpen = useModalStore.getState().modalIsOpen()
const isOpen = useModalStore.getState().modalIsOpen(id)

Types

type ModalState = 'opening' | 'open' | 'closing' | 'closed'

type ModalElement = {
  id: string
  modal: React.ReactNode
  skipAnimation?: boolean
  state: ModalState
  triggerElement?: HTMLElement | null
}

Exports

Export	Description
useModalStore	Zustand-style store hook
ModalStore	Store type
ModalState	'opening' | 'open' | 'closing' | 'closed'
ModalElement	Shape of a registered modal
ModalTriggerEvent	Union of synthetic and native event types