Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hairyf/overlastic
A universal overlays utils, supprot react, vue, vanilla, svelte
https://github.com/hairyf/overlastic
component dialog message modal overlays react typescript vue vue3
Last synced: 4 days ago
JSON representation
A universal overlays utils, supprot react, vue, vanilla, svelte
- Host: GitHub
- URL: https://github.com/hairyf/overlastic
- Owner: hairyf
- License: mit
- Created: 2022-06-20T07:51:23.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-10-28T15:34:23.000Z (19 days ago)
- Last Synced: 2024-10-28T17:15:43.650Z (19 days ago)
- Topics: component, dialog, message, modal, overlays, react, typescript, vue, vue3
- Language: TypeScript
- Homepage: https://overlastic.vercel.app/
- Size: 2.21 MB
- Stars: 73
- Watchers: 5
- Forks: 14
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Overlastic
A create modal | dialog | popup promise deferred library
Unified Overlays are used to create callback methods for
components and also support declarative use of Vue, React, and other components.
###### Features
- 💫 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
- âž¿ Supports component inheritance of global application context
## Packages
- [@overlastic/vanilla](https://overlastic.vercel.app/element/)
- [@overlastic/react](https://overlastic.vercel.app/react/)
- [@overlastic/vue](https://overlastic.vercel.app/vue/)
- [@overlastic/svelte](https://overlastic.vercel.app/svelte/)
- [@overlastic/core](https://overlastic.vercel.app/functions/constructor.html)
## Devtools
Components created by Unified Overlays support Devtools for their corresponding frameworks (React, Vue).
###### Supported
| React Developer Tools | Vue.js Devtools |
| --------------------- | ------------------------------- |
| ✅(holder) | ✅(holder\|child-app) |
- `holder` inserts a holder into the corresponding component, making it available in the virtual DOM.
- `child-app` creates a separate application that can be recognized by devtools.
## Why?
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.
## Install
```
pnpm add @overlastic/vue
# Or React
pnpm add @overlastic/react
```
## Usage
Use the `useExtendOverlay` Hook provided by overlays to obtain overlays metadata and create overlays components (Vue, React).
```ts
// In your Vue, React overlays component,
// use useExtendOverlay to obtain overlays metadata.
const { visible, resolve, reject } = useExtendOverlay({
// 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.
```ts
const callback = defineOverlay(Component)
const result = await callback(props)
```
---
```ts
const result = renderOverlay(Component, props)
```
# License
[MIT](LICENSE) Copyright (c) 2019-PRESENT