temporal-react-hook - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

demo/components/DemoUseGetDaysInYear.tsx

+import React, { useState } from 'react';
+import useGetDaysInYear from '../../src/useGetDaysInYear';
+import './DemoCard.css';
+
+export const DemoUseGetDaysInYear: React.FC = () => {
+  const [date, setDate] = useState('2024-01-01T00:00:00');
+
+  const daysInYear = useGetDaysInYear(date);
+
+  return (
+    <section className="demo-card">
+      <h3>useGetDaysInYear</h3>
+
+      {/* Configuration panel */}
+      <div className="demo-config-panel">
+        <div className="demo-config-row">
+          <span>Select Date:</span>
+          <input
+            type="datetime-local"
+            value={date.slice(0, 16)}
+            onChange={(e) => setDate(e.target.value)}
+            className="demo-input-compact demo-input-margin"
+          />
+        </div>
+      </div>
+
+      {/* Results display */}
+      <div className="demo-config-panel">
+        <div className="demo-config-row">
+          <span>Days in Year:</span>
+          <span className="demo-value">{daysInYear} days</span>
+        </div>
+      </div>
+
+      {/* Documentation */}
+      <div className="demo-info-card">
+        <div className="demo-description">
+          <strong>Description:</strong>
+          <span>Returns the number of days in the year for a given date (365 for regular years, 366 for leap years).</span>
+        </div>
+        <div className="demo-usage">
+          <span>
+            <strong>Syntax:</strong> useGetDaysInYear(date)<br/>
+            <strong>Parameters:</strong><br/>
+            - date: A date input (string, Date, or Temporal object)<br/>
+            <strong>Returns:</strong> A number representing the days in the year (365 or 366).<br/>
+            <strong>Example:</strong>
+            <code className="example-code">
+              <pre style={{ margin: 0 }}>{`const daysInYear = useGetDaysInYear('2024-01-01');
+// returns: 366 (2024 is a leap year)`}</pre>
+            </code>
+          </span>
+        </div>
+      </div>
+    </section>
+  );
+};

src/useGetDaysInYear.ts

+import { useMemo } from 'react';
+import { Temporal } from '@js-temporal/polyfill';
+
+/**
+ * @name useGetDaysInYear
+ * @description A hook that returns the total number of days in the year for a given date.
+ * @param {string | Date | Temporal.PlainDate | Temporal.PlainDateTime | Temporal.ZonedDateTime} date - The date for which to get the number of days in the year.
+ * @returns {number} The number of days in the year (365 or 366 for leap years).
+ */
+const useGetDaysInYear = (date: string | Date | Temporal.PlainDate | Temporal.PlainDateTime | Temporal.ZonedDateTime): number => {
+  const daysInYear = useMemo(() => {
+    try {
+      // Convert to PlainDate which has the daysInYear property
+      let plainDate: Temporal.PlainDate;
+      
+      if (typeof date === 'string') {
+        // Try to parse as ISO string
+        plainDate = Temporal.PlainDate.from(date);
+      } else if (date instanceof Date) {
+        // Convert JS Date to PlainDate
+        plainDate = Temporal.PlainDate.from({
+          year: date.getFullYear(),
+          month: date.getMonth() + 1,
+          day: date.getDate()
+        });
+      } else if (date instanceof Temporal.PlainDate) {
+        plainDate = date;
+      } else if (date instanceof Temporal.PlainDateTime) {
+        plainDate = date.toPlainDate();
+      } else if (date instanceof Temporal.ZonedDateTime) {
+        plainDate = date.toPlainDate();
+      } else {
+        throw new Error('Invalid date input');
+      }
+      
+      return plainDate.daysInYear;
+    } catch (error) {
+      console.error('Error in useGetDaysInYear:', error);
+      return 365; // Default fallback
+    }
+  }, [date]);
+
+  return daysInYear;
+};
+
+export default useGetDaysInYear;

CHANGELOG.md

@@ -8,2 +8,8 @@ # Changelog
 
+## [2.1.0] - 2025-07-17
+
+### Added
+- `useGetDaysInYear` hook to determine the number of days in the year for a given date (365 or 366).
+- `DemoUseGetDaysInYear` component to showcase the new hook.
+
 ## [2.0.0] - 2025-07-14
@@ -10,0 +16,0 @@

demo/Playground.tsx

@@ -23,2 +23,3 @@ import { useState, FC, useRef, useEffect } from "react";
 import DemoUseDifference from "./components/DemoUseDifference";
+import { DemoUseGetDaysInYear } from './components/DemoUseGetDaysInYear';
 
@@ -47,2 +48,3 @@ const demoSections = [
   { key: "difference", label: "useDifference", component: <DemoUseDifference /> },
+  { key: "getdaysinyear", label: "useGetDaysInYear", component: <DemoUseGetDaysInYear /> },
 ];
@@ -49,0 +51,0 @@

package.json

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

README.md

@@ -43,2 +43,3 @@ # temporal-react-hook
 | `useDateTimeRange` | Manage a date-time range with ordering, clamping, and helper functions |
+| `useGetDaysInYear` | Get the number of days in the year for a given date (365 or 366 for leap years) |
 
@@ -45,0 +46,0 @@ ## Running the Demo Locally

src/index.ts

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

No alert changes

Improved metrics

Total package byte prevSize

403049

1.05%

Number of package files

71

2.9%

Lines of code

9376

1.02%

Number of lines in readme file

76

1.33%

No dependency changes