Hacker0x01 · martijnrusschen · Sep 30, 2025 · May 4, 2025 · May 4, 2025 · May 4, 2025
diff --git a/docs-site/index.html b/docs-site/index.html
@@ -27,6 +27,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/index.jsx"></script>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/docs-site/package.json b/docs-site/package.json
@@ -4,7 +4,9 @@
   "private": true,
   "type": "module",
   "dependencies": {
+    "copy-to-clipboard": "^3.3.3",
     "date-fns": "^4.1.0",
+    "esbuild-wasm": "^0.25.9",
     "highlight.js": "^11.11.1",
     "lodash": "^4.17.21",
     "prism-react-renderer": "^2.4.1",
@@ -16,21 +18,26 @@
   },
   "scripts": {
     "start": "vite",
-    "build": "vite build",
+    "build": "tsc && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit"
   },
   "devDependencies": {
     "@eslint/js": "^9.35.0",
+    "@types/lodash": "^4.17.0",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
     "@vitejs/plugin-react": "^5.0.3",
     "eslint": "^9.35.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^6.0.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.4.0",
     "sass": "^1.92.1",
+    "typescript": "^5.7.2",
     "vite": "^7.1.6"
   },
   "packageManager": "[email protected]"

diff --git a/docs-site/src/components/App/Toast.tsx b/docs-site/src/components/App/Toast.tsx
@@ -0,0 +1,61 @@
+import React, { useState, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+
+import "./toast.scss";
+
+type ToastType = "success" | "error";
+
+let showToastFn: ((message: string, type: ToastType) => void) | null;
+
+export const toast = {
+  show: (message: string, type: ToastType) => {
+    if (showToastFn) {
+      showToastFn(message, type);
+    }
+  },
+};
+
+const Toast = (): React.ReactPortal | null => {
+  const [toastMeta, setToastMeta] = useState<{
+    message: string;
+    type?: ToastType;
+  }>({
+    message: "",
+  });
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearTimer = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+  };
+
+  const scheduleToastReset = () => {
+    clearTimer();
+    timerRef.current = setTimeout(() => {
+      setToastMeta({ message: "" });
+    }, 3000);
+  };
+
+  useEffect(() => {
+    showToastFn = (message: string, type: ToastType) => {
+      setToastMeta({ message, type });
+      scheduleToastReset();
+    };
+
+    return () => {
+      clearTimer();
+      showToastFn = null;
+    };
+  }, []);
+
+  const { message, type } = toastMeta;
+  if (!message?.trim()) return null;
+
+  return createPortal(
+    <div className={`toast toast--${type}`}>{message}</div>,
+    document.body,
+  );
+};
+
+export default Toast;
diff --git a/docs-site/src/components/App/index.jsx → docs-site/src/components/App/index.tsx b/docs-site/src/components/App/index.jsx → docs-site/src/components/App/index.tsx
@@ -1,18 +1,22 @@
 import { useEffect, useState } from "react";
 import DatePicker from "react-datepicker";
 import ExampleComponents from "../Examples";
+import Toast from "./Toast";
+import { initializeTsxTransformer } from "../tsxTransformer";
 import logo from "./logo.png";
 import ribbon from "./ribbon.png";
 
-const Example = () => {
-  const [isOpen, setIsOpen] = useState(true);
-  const [startDate, setStartDate] = useState(new Date());
-  const [isScrolled, setIsScrolled] = useState(true);
+const Example: React.FC = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(true);
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [isScrolled, setIsScrolled] = useState<boolean>(true);
 
   useEffect(() => {
-    const handleScroll = () => setIsScrolled(window.scrollY < 400);
+    const handleScroll = (): void => setIsScrolled(window.scrollY < 400);
     document.addEventListener("scroll", handleScroll);
 
+    initializeTsxTransformer();
+
     return () => {
       document.removeEventListener("scroll", handleScroll);
     };
@@ -22,7 +26,7 @@ const Example = () => {
     <DatePicker
       open={isOpen && isScrolled}
       selected={startDate}
-      onChange={(date) => {
+      onChange={(date: Date | null) => {
         setStartDate(date);
         setIsOpen(false);
       }}
@@ -31,7 +35,7 @@ const Example = () => {
   );
 };
 
-const Root = () => (
+const Root: React.FC = () => (
   <div>
     <div className="hero">
       <div className="hero__content">
@@ -107,6 +111,8 @@ const Root = () => (
     <a href="https://github.com/Hacker0x01/react-datepicker/">
       <img className="github-ribbon" src={ribbon} alt="Fork me on GitHub" />
     </a>
+
+    <Toast />
   </div>
 );
 

diff --git a/docs-site/src/components/App/toast.scss b/docs-site/src/components/App/toast.scss
@@ -0,0 +1,27 @@
+$toast-success-color: #009688;
+$toast-error-color: #ef5350;
+
+.toast {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+
+  display: inline-block;
+  color: #fff;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
+  border-radius: 5px;
+  padding: 10px 20px;
+  font-size: 14px;
+  font-weight: 600;
+  text-align: center;
+  z-index: 1000;
+
+  &--success {
+    background-color: $toast-success-color;
+  }
+
+  &--error {
+    background-color: $toast-error-color;
+  }
+}
diff --git a/docs-site/src/components/Example/copy.svg b/docs-site/src/components/Example/copy.svg
diff --git a/docs-site/src/components/Example/index.jsx b/docs-site/src/components/Example/index.jsx