Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thiagozf/demodal
Promise-based utility to control modal states in React
https://github.com/thiagozf/demodal
hook modal promise react
Last synced: 4 days ago
JSON representation
Promise-based utility to control modal states in React
- Host: GitHub
- URL: https://github.com/thiagozf/demodal
- Owner: thiagozf
- License: mit
- Created: 2022-01-20T18:17:20.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-11T02:13:10.000Z (about 2 years ago)
- Last Synced: 2024-04-24T19:12:12.559Z (9 months ago)
- Topics: hook, modal, promise, react
- Language: TypeScript
- Homepage:
- Size: 198 KB
- Stars: 15
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Promise-based utility to control modal states in React
Zero-dependency library that easily integrates with your existing UI components and allows you to naturally use modals in React
[](https://github.com/thiagozf/demodal/actions?query=workflow%3A%22demodal+tests%22)
[](https://app.codecov.io/gh/thiagozf/demodal/)
[](https://www.npmjs.com/package/demodal)
[](https://twitter.com/intent/tweet?url=https://github.com/thiagozf/demodal&text=Promise-based%20utility%20to%20control%20modal%20states%20in%20React!&hashtags=react,demodal)
## Quick Features
- **Promise based**: open your modal with a simple function call and `await` for the result.
- **Uncontrolled**: open/close your modal from anywhere in the code (even inside the modal itself).
- **Decoupled**: no need to import a modal component to use it. Modals can be managed by ID.
- **Tiny**: zero-dependency to keep your bundle size under control: `~1.5kB`.
- **Easy integration**: easily integrate with any UI library.
- **Lazy-loading**: delay the rendering of your modal component until it's open.
## Examples
Try it on CodeSandbox or browse the [examples folder](https://github.com/thiagozf/demodal/tree/main/examples).
[](https://githubbox.com/thiagozf/demodal/tree/main/examples/basic)
## Basic Usage
```jsx
import Demodal from 'demodal'
import MyModal from './MyModal'
// ...
const result = await Demodal.open(MyModal, { myModalProp: 'value' })
// Do something with result
```
## Use-Case: Confirmation Modal
```jsx
/**
* confirm.js
*/
import { Demodal, useModal } from 'demodal'
// Register your Confirm modal wrapping it with `Demodal.create`
const Confirm = Demodal.create(
({ title = 'Confirmation', message = 'Do you confirm this action?' }) => {
// useModal hook to control UI components
const modal = useModal()
// Once resolved, automatically close the modal
const resolve = value => () => {
modal.resolve(value)
modal.close()
}
// "title" and "message" are props sent with "modal.open()"
return (
{title}
{body}
Yes
No
)
}
)
// Create a custom confirm function
export const confirm = props => Demodal.open(Confirm, props)
/**
* page.js
*/
import { confirm } from './confirm'
export const Page = () => {
const handleClick = async () => {
const confirmed = await confirm({
title: 'Are you sure?',
message: 'This action is irreversible',
})
console.log(confirmed)
}
return Action
}
/**
* app.js
*/
import { Demodal } from 'demodal'
function App() {
// Remember to add a Demodal.Container to your app's root
return (
<>
>
)
}
```
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
