A create model | dialog | popup promise deferred library
Unified Overlays are used to create callback (imperative) methods for
components and also support declarative use of Vue, React, and other components.
- 💫 Simplify the create message or dialog and call your UI as a promise
- 🧩 Integration and customization of existing component libraries
- 🦾 provide secure type prompts for each constructor
- 🌟 Highly stable with 99.54% unit test coverage
- ➿ Supports component inheritance of global application context
Components created by Unified Overlays support Devtools for their corresponding frameworks (React, Vue).
| React Developer Tools | Vue.js Devtools |
|---|---|
| ✅(holder) | ✅(holder|child-app) |
holderinserts a holder into the corresponding component, making it available in the virtual DOM.child-appcreates a separate application that can be recognized by devtools.
Creating Model classes repetitive and time-consuming. When reusing a component that uses a Model class, common fields such as reject, resolve, and visible need to be defined repeatedly. Additionally, controlling the Model process (clear data -> open model -> edit data -> onConfirm -> save data) can lead to a lot of redundant code, especially for frequently used components like an image selector.
Unified Overlays simplifies modal creation by unifying the redundant processes and state management. It can effectively create imperative components, and can still be used declaratively.
pnpm add @overlastic/vue
# Or React
pnpm add @overlastic/react
Use the usePrograms Hook provided by overlays to obtain overlays metadata and create overlays components (Vue, React).
// In your Vue, React overlays component,
// use usePrograms to obtain overlays metadata.
const { visible, resolve, reject } = usePrograms({
// The duration of the overlays duration prevents
// the component from being destroyed too early.
duration: 1000
})Use defineOverlay|renderOverlay to convert to a callback (imperative) method.
const callback = defineOverlay(Component)
const result = await callback(props)const result = renderOverlay(Component, props)MIT Copyright (c) 2019-PRESENT