https://github.com/luisiacc/react-use-modal
A react library for managing the state of your modals.
https://github.com/luisiacc/react-use-modal
Last synced: 18 days ago
JSON representation
A react library for managing the state of your modals.
- Host: GitHub
- URL: https://github.com/luisiacc/react-use-modal
- Owner: luisiacc
- License: mit
- Created: 2022-04-09T18:03:31.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-08-28T20:49:53.000Z (over 2 years ago)
- Last Synced: 2025-03-27T15:48:54.442Z (about 1 month ago)
- Language: TypeScript
- Size: 953 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-use-modal
> A react library for managing the state of your modals
## Install
```bash
npm install --save @luisiacc/react-use-modal
```
## Quick notes
The library doesn't care how you render your modal, it just handles the state to render it, and optionally pass data
to it if required, sort of like `react-query` does on queries.
## Usage
This is just a showcase, please refer to the docs to see how to cover most use cases
```tsx
import React from "react"
import SomeModal from "some-modal"; // I'm just making this up, imagine is a real modal
import { useModal, ModalController } from "@luisiacc/react-use-modal"
function Example(props: any) {
const modals = useModal()
const doSomething = (data: any) => {
// ...
}
return (
<>
modals.push("some-modal")}>Show something
(
{
doSomething(someData)
modal.submit();
}}>
)} />
>
)
}
```
- If you are using the `` inside a router, and your modal does some kind of redirection,
you should import `ModalController` from `@luisiacc/use-react-modal/router` like:
```ts
import {ModalController} from "@luisiacc/use-react-modal/router"
```