First commit

Author: Kykal

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+	"files.exclude": {
+		"**/.git": true,
+		"**/.svn": true,
+		"**/.hg": true,
+		"**/CVS": true,
+		"**/.DS_Store": true,
+		"**/Thumbs.db": true
+	},
+	"hide-files.files": []
+}

package-lock.json

@@ -0,0 +1,21 @@
+{
+  "name": "react-modal",
+  "version": "1.0.0",
+  "description": "A native React modal.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsc"
+  },
+  "keywords": [],
+  "author": "Alan Xavier Benavides Benavides",
+  "license": "ISC",
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.1.3"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.8"
+  }
+}

package.json

@@ -0,0 +1,45 @@
+//React
+import { useRef, useId, useEffect, DialogHTMLAttributes } from "react";
+
+
+//Typings
+type Modal = DialogHTMLAttributes<HTMLDialogElement> & {
+	onClose: () => void;
+	open: boolean;
+	children?: any;
+}
+
+
+//Main component content
+const Modal = (props: Modal): JSX.Element => {
+
+	//React
+	const ref = useRef<HTMLDialogElement>(null);
+	const id = useId();
+
+	useEffect( () => {
+
+		if( props.open ) {
+			ref.current?.showModal();
+			document.body.style.overflow = 'hidden';
+			return;
+		}
+
+		ref.current?.close();
+		document.body.removeAttribute('style');
+	}, [props.open] );
+
+	//Main component render
+	return (
+		<dialog
+			id={id}
+			ref={ref}
+			{...props}
+		>
+			{props.children}
+		</dialog>
+	);
+};
+
+
+export default Modal; //Export main component

src/components/Modal/Modal.tsx

@@ -0,0 +1 @@
+export { default } from './Modal';

src/components/Modal/index.ts

@@ -0,0 +1 @@
+export { default as Modal } from './Modal';

src/components/index.ts

@@ -0,0 +1,26 @@
+{
+	"include": ["src"],
+  "exclude": [
+    "dist",
+    "node_modules"
+  ],
+  "compilerOptions": {
+    "module": "esnext",
+    "lib": ["dom", "esnext"],
+    "importHelpers": true,
+    "declaration": true,
+    "sourceMap": true,
+    "rootDir": "./src",
+    "outDir": "./dist/esm",
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "moduleResolution": "node",
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+  }
+}