hoyst

hoyst manages modals, toasts, and dialogs on React and React Native with:

• Direct imports — import { overlay, OverlayProvider } from "hoyst" and go
• Slot-based context preservation — overlays inherit React context from where they're opened
• close/unmount separation — exit animations and state preservation built-in
• Promise-based results — await overlay.openAsync(ConfirmDialog) returns user responses
• Native layer resolution — solves React Native JS/native view hierarchy conflicts via react-native-teleport

Install

# React (web)
pnpm add hoyst

# React Native
pnpm add hoyst react-native-teleport

Usage

import { overlay, OverlayProvider, OverlaySlot } from "hoyst"

function Modal({ isOpen, close, unmount }) {
  return (
    <dialog open={isOpen}>
      <p>Hello!</p>
      <button onClick={close}>Close</button>
    </dialog>
  )
}

function App() {
  return (
    <OverlayProvider>
      <OverlaySlot />
      <button onClick={() => overlay.open(Modal)}>Open</button>
    </OverlayProvider>
  )
}

Documentation

Full docs, interactive examples, and API reference: hoyst docs

Credits

Built on the declarative overlay pattern from overlay-kit by Toss, extended with Slot-based context preservation and React Native native layer resolution.

License

MIT