Update README.md

Author: AlexDemzz

README.md

@@ -37,7 +37,8 @@ Create a basic modal component:
 
 ```tsx
 function Modal({
-  data,
+  title,
+  message,
   close,
   isOpen,
 }) {
@@ -46,8 +47,8 @@ function Modal({
   return (
     <div className="modal-backdrop">
       <div className="modal">
-        <strong>{data.title}</strong>
-        <p>{data.message}</p>
+        <strong>{title}</strong>
+        <p>{message}</p>
         <button onClick={() => close()}>OK</button>
       </div>
       <style jsx>{`

dist/context.d.ts.map

@@ -1,8 +1,7 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
-import { useModalManager } from "./use-modal-manager";
 import { ModalItemProvider } from "./item-context";
+import { useModalManager } from "./use-modal-manager";
 const ModalContext = createContext(null);
 export function ModalProvider({ children, backdrop, loading, modal, }) {
     const modalManager = useModalManager();
@@ -11,7 +10,7 @@ export function ModalProvider({ children, backdrop, loading, modal, }) {
 function Modals({ backdrop, loading, modal, }) {
     const modalManager = useModals();
     const { stack, isLoading } = modalManager;
-    return (_jsxs(_Fragment, { children: [isLoading && loading && loading(modalManager), stack.map((modalInstance) => (_jsx(ModalItemProvider, { modal: modalInstance, children: modal ? (modal(modalInstance, modalManager)) : (_jsx(modalInstance.component, { data: modalInstance.data, close: modalInstance.close, isOpen: modalInstance.isOpen, id: modalInstance.id, index: modalInstance.index })) }, modalInstance.id))), (isLoading || stack.length > 0) && backdrop && backdrop(modalManager)] }));
+    return (_jsxs(_Fragment, { children: [isLoading && loading && loading(modalManager), stack.map((modalInstance) => (_jsx(ModalItemProvider, { modal: modalInstance, children: modal ? (modal(modalInstance, modalManager)) : (_jsx(modalInstance.component, { ...modalInstance.props, close: modalInstance.close, isOpen: modalInstance.isOpen, id: modalInstance.id, index: modalInstance.index })) }, modalInstance.id))), (isLoading || stack.length > 0) && backdrop && backdrop(modalManager)] }));
 }
 export function useModals() {
     const context = useContext(ModalContext);

dist/context.js

@@ -1,5 +1,5 @@
 export { ModalProvider, useModals } from "./context";
-export { useModalManager } from "./use-modal-manager";
 export { useBeforeClose } from "./item-context";
 export type { ModalProps } from "./types";
+export { useModalManager } from "./use-modal-manager";
 //# sourceMappingURL=index.d.ts.map

dist/index.d.ts

@@ -1,3 +1,3 @@
 export { ModalProvider, useModals } from "./context";
-export { useModalManager } from "./use-modal-manager";
 export { useBeforeClose } from "./item-context";
+export { useModalManager } from "./use-modal-manager";

dist/index.d.ts.map

@@ -1,5 +1,5 @@
 import { ModalInstance } from "./types";
-export declare function useModal(): ModalInstance<any>;
+export declare function useModal(): ModalInstance<any, any>;
 export declare function useBeforeClose(callback: () => boolean): void;
 export declare function ModalItemProvider({ modal, children, }: {
     modal: ModalInstance;

dist/index.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useEffect } from "react";
 const ModalItemContext = createContext(null);

dist/item-context.d.ts

@@ -9,25 +9,31 @@ export interface ModalProviderProps {
     loading?: (modals: ModalManager) => ReactElement | null;
     modal?: (modal: ModalInstance, modals: ModalManager) => ReactElement;
 }
-export interface ModalProps<ReturnValue = any> extends Record<string, any> {
+export interface ModalProps<ReturnValue = any> {
     index: number;
     id: string;
     isOpen: boolean;
     close: (value?: ReturnValue) => void;
 }
-export interface ModalInstance<ReturnValue = any> {
-    component: ComponentType<any>;
+export type ModalComponent<T = any, ReturnValue = any> = ComponentType<ModalProps<ReturnValue> & T>;
+export interface ModalInstance<T = any, ReturnValue = any> {
+    component: ModalComponent<T, ReturnValue>;
     id: string;
-    data?: any;
+    props?: Omit<T, keyof ModalProps<ReturnValue>>;
     isOpen: boolean;
     close: (value?: ReturnValue) => void;
     index: number;
     onBeforeClose: (callback: () => boolean) => void;
 }
 export interface ModalManager {
-    open: <T = any, R = any>(component: ComponentType<T> | (() => Promise<{
-        default: ComponentType<T>;
-    }>), data?: any, options?: ModalOptions) => Promise<R>;
+    open: {
+        <T extends Record<string, never>, R = any>(component: ModalComponent<T, R> | (() => Promise<{
+            default: ModalComponent<T, R>;
+        }>), options?: ModalOptions): Promise<R>;
+        <T, R = any>(component: ModalComponent<T, R> | (() => Promise<{
+            default: ModalComponent<T, R>;
+        }>), props: Omit<T, keyof ModalProps<R>>, options?: ModalOptions): Promise<R>;
+    };
     close: (n?: number) => boolean;
     closeById: (id: string) => boolean;
     closeAll: () => boolean;