temporal-react-hook - npm Package Compare versions

Comparing version 2.1.0 to 2.2.2

demo/components/DemoUseParseISO.tsx

+import React, { useState } from 'react';
+import useParseISO from '../../src/useParseISO';
+import './DemoCard.css';
+
+const DemoUseParseISO: React.FC = () => {
+  const [isoString, setIsoString] = useState<string>('2025-07-21T12:30:00');
+
+  const parsedDate = useParseISO(isoString);
+
+  return (
+    <section className="demo-card">
+      <h3>useParseISO</h3>
+
+      {/* Config panel */}
+      <div className="demo-config-panel">
+        <div className="demo-config-row">
+          <label htmlFor="iso-input">ISO&nbsp;String:</label>
+          <input
+            id="iso-input"
+            type="text"
+            className="demo-input-compact"
+            value={isoString}
+            onChange={(e) => setIsoString(e.target.value)}
+            placeholder="2025-07-21T12:30:00"
+          />
+        </div>
+      </div>
+
+      {/* Results display */}
+      <div className="demo-config-panel">
+        <div className="demo-config-row">
+          <span>Parsed:</span>
+          <span className="demo-value">
+            {parsedDate ? parsedDate.toString() : 'Invalid ISO string'}
+          </span>
+        </div>
+      </div>
+
+      {/* Documentation */}
+      <div className="demo-info-card">
+        <div className="demo-description">
+          <strong>Description:</strong>
+          <span>Parses an ISO-8601 date/time string into a <code>Temporal.PlainDateTime</code> instance. Returns <code>null</code> for invalid strings.</span>
+        </div>
+        <div className="demo-usage">
+          <span>
+            <strong>Syntax:</strong> useParseISO(isoString)<br/>
+            <strong>Parameters:</strong><br/>
+            - isoString: A date-time string in ISO 8601 format<br/>
+            <strong>Returns:</strong> A Temporal.PlainDateTime instance, or null when the string is invalid.<br/>
+            <strong>Example:</strong>
+            <code className="example-code">
+              <pre style={{ margin: 0 }}>{`const dateTime = useParseISO('2024-02-29T10:00:00');\n// returns: 2024-02-29T10:00:00`}</pre>
+            </code>
+          </span>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default DemoUseParseISO;

src/useParseISO.ts

+import { Temporal } from '@js-temporal/polyfill';
+import { useMemo } from 'react';
+
+/**
+ * Parse an ISO-8601 date/time string into a `Temporal.PlainDateTime` instance.
+ *
+ * The hook memoises the parsed value and re-computes only when `isoString` changes.
+ * If the string is invalid, the hook returns `null`.
+ *
+ * @param isoString – A string in ISO-8601 format (e.g. "2025-07-21T15:30:00Z").
+ * @returns `Temporal.PlainDateTime` when parsable, otherwise `null`.
+ */
+export default function useParseISO(isoString: string): Temporal.PlainDateTime | null {
+  const parsed = useMemo(() => {
+    if (!isoString) return null;
+    try {
+      // Temporal.PlainDateTime.from parses ISO 8601 strings.
+      return Temporal.PlainDateTime.from(isoString);
+    } catch {
+      return null;
+    }
+  }, [isoString]);
+
+  return parsed;
+}

CHANGELOG.md

@@ -8,2 +8,8 @@ # Changelog
 
+## [2.2.2] - 2025-07-21
+
+### Added
+- `useParseISO` hook to parse ISO-8601 date-time strings into `Temporal.PlainDateTime`.
+- `DemoUseParseISO` component to demonstrate the hook.
+
 ## [2.1.0] - 2025-07-17
@@ -10,0 +16,0 @@

demo/components/DemoCard.css

@@ -528,2 +528,22 @@ /* Card container for demo components */
 /* === Dart Docs-Inspired Playground Sidebar === */
+
+.playground-sidebar-search {
+  padding: 0.75rem 1.25rem 0.5rem 1.25rem;
+}
+
+.playground-sidebar-search input {
+  width: 80%;
+  height: 25px;
+  font-size: 16px;
+  border-radius: 1px;
+  border: 1px solid grey;
+  padding-left: 5px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.playground-sidebar-search input:focus {
+  border-color: #1976d2;
+  box-shadow: 0 0 0 1px rgba(25,118,210,0.4);
+}
 .playground-sidebar {
@@ -530,0 +550,0 @@ background: #fff;

demo/Playground.tsx

@@ -24,2 +24,3 @@ import { useState, FC, useRef, useEffect } from "react";
 import { DemoUseGetDaysInYear } from './components/DemoUseGetDaysInYear';
+import DemoUseParseISO from "./components/DemoUseParseISO";
 
@@ -49,5 +50,7 @@ const demoSections = [
   { key: "getdaysinyear", label: "useGetDaysInYear", component: <DemoUseGetDaysInYear /> },
+  { key: "parseiso", label: "useParseISO", component: <DemoUseParseISO /> },
 ];
 
 const Playground: FC = () => {
+  const [search, setSearch] = useState("");
   const [selected, setSelected] = useState(demoSections[0].key);
@@ -104,2 +107,12 @@ const [hovered, setHovered] = useState<string | null>(null);
         </div>
+        {/* Search box */}
+        <div className="playground-sidebar-search">
+          <input
+            type="text"
+            value={search}
+            onChange={e => setSearch(e.target.value)}
+            placeholder="Search hooks..."
+            aria-label="Search hooks"
+          />
+        </div>
         <nav
@@ -114,3 +127,5 @@ ref={navRef}
             <div className="playground-nav-items">
-              {demoSections.map(section => (
+              {demoSections
+                .filter(section => section.label.toLowerCase().includes(search.toLowerCase()))
+                .map(section => (
                 <div
@@ -117,0 +132,0 @@ key={section.key}

package.json

 {
   "name": "temporal-react-hook",
-  "version": "2.1.0",
+  "version": "2.2.2",
   "description": "A React library that provides hooks for handling date and time operations using the Temporal API",
@@ -21,3 +21,4 @@ "main": "index.js",
     "formatting",
-    "leap-year"
+    "leap-year",
+    "parse-iso"
   ],
@@ -24,0 +25,0 @@ "author": "Vlad Grigoryan",

README.md

@@ -44,2 +44,3 @@ # temporal-react-hook
 | `useGetDaysInYear` | Get the number of days in the year for a given date (365 or 366 for leap years) |
+| `useParseISO` | Parse an ISO-8601 date-time string into a `Temporal.PlainDateTime` instance |
 
@@ -46,0 +47,0 @@ ## Running the Demo Locally

src/index.ts

@@ -22,1 +22,2 @@ export { default as useCurrentDateTime } from './useCurrentDateTime';
 export { default as useGetDaysInYear } from './useGetDaysInYear';
+export { default as useParseISO } from './useParseISO';

No alert changes

Improved metrics

Total package byte prevSize

407356

1.07%

Number of package files

73

2.82%

Lines of code

9487

1.18%

Number of lines in readme file

77

1.32%

No dependency changes