https://github.com/ha1fstack/slick-modal
Simple modal manager for React that does the trick.
https://github.com/ha1fstack/slick-modal
Last synced: 3 months ago
JSON representation
Simple modal manager for React that does the trick.
- Host: GitHub
- URL: https://github.com/ha1fstack/slick-modal
- Owner: ha1fstack
- License: mit
- Created: 2023-07-27T21:32:08.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-19T18:17:05.000Z (over 1 year ago)
- Last Synced: 2025-02-19T12:56:27.564Z (3 months ago)
- Language: TypeScript
- Size: 81.1 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Slick Modal
Simple modal manager for React that does the trick.
## Introduction
Slick Modal is a small modal state manager for React focusing on simplicity and ease of use.
It is inspired by [nice-modal-react](https://github.com/eBay/nice-modal-react).
You can show and hide modals in a declarative way, with typesafe async and client component("use client") support.
## Install
```bash
npm install slick-modal
yarn add slick-modal
pnpm install slick-modal
```
## Usage
Store, Provider and Outlet
```tsx
"use client";
import {
defaultStore,
createModalStore,
createModalControl,
SlickModalProvider,
SlickModalOutlet,
} from "slick-modal";
// default modal store is created by default and used if no store context is specifed
console.log(defaultStore);
const modalStore = createModalStore();
const modalControl = createModalControl(modalStore);
// you can externally control the modal store via modalControl
modalControl.open(
Hi There
);
modalControl
.open(Hi There
, {
key: "my-modal-key",
})
.then((data) => {
alert(data);
});
modalControl.resolve("my-modal-key", "done");
modalControl.close("my-modal-key");
modalControl.closeAll();
// important: you don't have to specify default provider.
// if no provider is specified, slick modal will use the default provider.
function WithProvider({ children }: { children: React.ReactNode }) {
return (
// if no explict store is provided, the provider will automatically create a new internal store.
{children}
);
}
// default outlet
function ModalOutlet() {
return ;
}
// you can also use render props to customize the outlet
function CustomModalOutlet() {
return (
{(modals) => {
return (
0
? "bg-zinc-100 h-full -mx-4 p-4 rounded"
: undefined
}
>
{modals.map((modal, i) => (
{modal.element}
))}
);
}}
);
}
```
Single use modals
```tsx
"use client";
import { useModal, createModal } from "slick-modal";
function Modal() {
const { key, hide, resolve, stackIndex } = useModal();
return (
This is modal {key} at {stackIndex}
{
resolve(`modal ${key} resolved`);
hide();
}}
>
close
);
}
function ModalControl() {
const openModal = () => {
createModal().then((data) => {
alert(data);
});
};
return (
Open
);
}
```
Managed modals
```tsx
"use client";
function ManagedModal({ text }: { text: string }) {
const { key, stackIndex, hide, resolve } = managedModal.useModal();
return (
This is managed modal {key} at {stackIndex}
{text}
{
// typed resolve params
resolve(`managed modal ${key} resolved`);
hide();
}}
>
close
);
}
export const managedModal = createManagedModal<
string,
// typescript generic inference is all or nothing, so we have to manually specify the props type
React.ComponentProps
>(ManagedModal);
function ModalControl() {
// by default, if same modal is opened multiple times, the previous modal will be closed, and resolve() will only resolve current modal instance.
// you can optionally override this behavior.
const openManagedModal = () => {
// typed resolve params
managedModal.open({ text: `hello ${Math.random()}` }).then((data) => {
alert(data);
});
};
return (
Open Managed
);
}
```
## Demo
Clone the repo and run the example Next.JS app.
## To Do
- [ ] Add testings
- [ ] Add JSDoc