feat: 🎉 Initial commit

Author: dennib

.gitignore

@@ -0,0 +1,43 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Dependency directories
+node_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

package-lock.json

@@ -0,0 +1,30 @@
+{
+  "name": "react-use-modal",
+  "version": "0.0.1",
+  "description": "A custom hook for easy and quick modal management for React",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dennib/useModal.git"
+  },
+  "keywords": [
+    "react",
+    "typescript",
+    "modal",
+    "dialog"
+  ],
+  "author": "Denni Bevilacqua",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/dennib/useModal/issues"
+  },
+  "homepage": "https://github.com/dennib/useModal#readme",
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "react": "^18.2.0",
+    "typescript": "^4.9.5"
+  }
+}

package.json

@@ -0,0 +1,37 @@
+import { useState } from 'react';
+import { IModalConfig, IUseModalReturn } from './useModal.types';
+
+const defaultConfig: IModalConfig = { open: false };
+
+const useModal = (config?: IModalConfig): IUseModalReturn => {
+  const [modalConfig, setModalConfig] = useState<IModalConfig>({
+    ...defaultConfig,
+    ...config,
+  });
+
+  const toggleModal = () => {
+    setModalConfig(prev => ({ ...prev, open: !prev.open }));
+  };
+
+  const showModal = () => setModalConfig(prev => ({ ...prev, open: true }));
+
+  const hideModal = () => setModalConfig(prev => ({ ...prev, open: false }));
+
+  const updateModalConfig = (config: Partial<IModalConfig>) =>
+    setModalConfig(prev => ({ ...prev, ...config }));
+
+  const extendConfig = {
+    ...modalConfig,
+    handleClose: hideModal,
+  };
+
+  return {
+    toggleModal,
+    showModal,
+    hideModal,
+    modalConfig: extendConfig,
+    updateModalConfig,
+    setModalConfig,
+  };
+};
+export { useModal };

src/useModal.ts

@@ -0,0 +1,29 @@
+import { ReactNode, Dispatch, SetStateAction, CSSProperties } from "react";
+
+export interface IUseModalReturn {
+  toggleModal: () => void;
+  showModal: () => void;
+  hideModal: () => void;
+  modalConfig: IModalConfig;
+  updateModalConfig: (config: Partial<IModalConfig>) => void;
+  setModalConfig: Dispatch<SetStateAction<IModalConfig>>;
+}
+export interface IModalConfig {
+  open?: boolean;
+  title?: string;
+  centerContent?: boolean;
+  showActionsDivider?: boolean;
+  showCloseIcon?: true;
+  children?: ReactNode;
+  buttons?: IModalButton[];
+  fullWidthButtons?: true;
+  stretchButtons?: boolean;
+}
+
+export interface IModalButton {
+  text: string;
+  style: CSSProperties;
+  onClick?: () => void;
+  disabled?: boolean;
+  disableClose?: boolean;
+}